﻿// DragDropEditor class definition
var DragDropEditor = Class.create();
DragDropEditor.prototype = {
	initialize: function () {
		this.tagId = "editor_" + editorIndex++;  // html tag id for editor
		this.systemLevel = -1;  // 0=schedule, 1=package, 2=event, 3=combo, 4=asset
		this.containerId = "";  // id of div where editor is rendered
		this.dragContainer = null;  // the container for the draggable icon appearing above each editor
		this.trash = null;  // tbd: the trash list for dragging and deleting
		this.ddButtons = null;  // a class to organize the display and use of buttons above editor
		this.numLists = -1;  // number of lists in editor
		this.listTypes = [];  // array of types of lists
		this.headerText = [];  // array of text headers to match lists
		this.editorLookupId = "";  // if necessary id of package or event for entire editor
		this.listLookupIds = [];  // dates or ids of zones, channels, etc for a list
		this.editorBodyId = "";  // id for HTML tag to locate offset of first list
		this.startTime = null;  // start time for time column
		this.endTime = null;  // end time for time column
		this.interval = -1;  // interval for time column in seconds
		this.timeSlots = [];  // array of time slots
		this.timeStrs = []; // array of time slot strings
		this.numIntervals = -1; // calculated number of intervals for slotted lists
		this.spacerWidth = -1; // spacer width if one exists between lists/columns
		this.timeColType = -1;  // specifies if time column is 0 = t or 1 = timeline
		this.timeColWidth = -1;  // stores width of time col cells for calculating drop location
		this.cellWidth = -1;  // calculated cell width for items in editor
		this.cellHeight = -1;  // calculated cell height for items in editor
		this.pixelsToSecs = -1;  // calculated ratio of interval to height (in seconds to pixels)
		this.editorWidth = -1; // calculated editor width
		this.cellPadding = -1; // horizontal cell padding (left and right)
		this.selectedOffset = [];  // tbd: another shortcut for reference to selected cell or list
		this.draggablePecas = []; // reference to all the draggable objects in the editor
		this.draggablePecaIndex = 0;  // index for all Pecas in editor
		this.ddLists = []; // reference to all the sortable lists in the editor
		this.sortableListArray = [];  // array of names of sortable lists to pass to Sortable.create
		this.clipboard = [];  // reference to a temp holding space for copy, cut, paste
		this.readOnly = false;
		this.activeList = null;  // reference to the calculated active list
		this.activeSortable = null;
		this.activeDrop = null;  // reference to the calculated active drop box
		this.hotKeys = [null,null,null,null,null,null]  // tbd: array of hot key references
		this.selectedCell = null;  // points to selected cell
		this.selectedList = null; // selected list
		this.selectedRegion = [];  // selection region
		this.request = []; // null ajax call
		this.isModified = false; // set to true when a change is made on editor
		this.cues = [];  // array of cue objects for package and event editors
		this.cueIndex = 0; // index for the cues in an editor
		
		// add to global array of editors and make active
		editors.push(this);

	},
	
	// function to destroy all properties, stop all event observers, and destroy object
	destroy: function () {
	    editors.pop();
	    //if (this.numLists > 0) {
	    if (this.systemLevel == 0) {
	        // close all schedules
	        for (var i=0, len=this.ddLists.length; i<len; i++) {
	            this.ddLists[i].scheduleForEditClose();
	            openSchedule = false;
	        }
	    }
	    
	    this.deactivateDD();
	    if ($(this.tagId)) $(this.tagId).remove();
	    //}
	    this.cues.clear();
	},
	
	// function to load all properties from DB
	load: function (systemLevel, containerId, numLists, listTypes, headerText, editorLookupId, listLookupIds, startTime, endTime, interval, 
						timeColType, editorWidth, cellHeight, timeColWidth, spacerWidth, cellPadding, xml) {
		// initialize values
		activeEditor = this;
		this.systemLevel = systemLevel;
		this.containerId = containerId;
		this.numLists = numLists;
		this.listTypes = listTypes;
		this.headerText = headerText;
		this.editorLookupId = editorLookupId;
		this.listLookupIds = listLookupIds;
		this.editorBodyId = this.tagId + "_body";
		this.startTime = startTime;
		this.endTime = endTime;
		this.interval = interval;
		this.timeColType = timeColType;
		this.editorWidth = editorWidth;
		this.cellHeight = cellHeight;
		this.timeColWidth = timeColWidth;
		this.spacerWidth = spacerWidth;
		this.cellPadding = cellPadding;
		this.xml = xml;
		
		// drag observers for all editors
		this.cachedEventSelectCell = this.eventSelectCell.bindAsEventListener(this);
		this.cachedShowMenu = this.showMenu.bindAsEventListener(this);
		this.cachedDrillDown = this.drillDown.bindAsEventListener(this);
		this.cachedProcessGetInfo = this.processGetInfo.bindAsEventListener(this);
		
		// observer for removing cue string rows
		this.cachedRemoveCueStringRow = this.removeCueStringRow.bindAsEventListener(this);
		this.cachedUpdateCueInEditor = this.updateCueInEditor.bindAsEventListener(this);
		
	    // initialize draggablePecaIndex
	    this.draggablePecaIndex = 0;		
		
		if (this.systemLevel < 3) {  // only initialize the remainder if this is a complete drag drop editor
		
			// drag observers for schedule, package, event
		    this.cachedCalculateDrop = this.calculateDrop.bindAsEventListener(this);
            this.cachedMouseUp = this.mouseUp.bindAsEventListener(this);
                       
            // list header observer
            this.cachedEventSelectList = this.eventSelectList.bindAsEventListener(this);
            this.cachedShowListMenu = this.showListMenu.bindAsEventListener(this);
		    
		    if (numLists != listTypes.length) alert('mismatch between number of lists and number of list types provided');
		    
		    // calculate pixels to seconds ratio
		    this.pixelsToSecs = (cellHeight+1) / interval;  // add 1 for single border on each cell
    		
		    // calculate cell width
		    if (systemLevel == 0) { // no scrollbar for schedule editor level
		        this.cellWidth = Math.floor((editorWidth - timeColWidth - (spacerWidth*(numLists+1)) 
		                        - (cellPadding*2*(numLists+1)) - ((numLists+1)*2)) / numLists);
    		} else {
		        this.cellWidth = Math.floor((editorWidth - timeColWidth - (spacerWidth*numLists) 
		                        - (cellPadding*2*numLists) - (cellPadding*2) - (numLists*2) - 22)/ numLists); // 22 for scrollbar and selected borders
    		}
    		    		
		    // create editor buttons
		    this.ddButtons = new EditorButtons();
    		
		    // calculate numIntervals
		    this.numIntervals = (endTime - startTime) / (interval * 1000);  // Multiply by 1000 for milliseconds
    			
		    // load lists
		    var containerPushed = false;
		    for (var i=0; i<numLists; i++) {
			    if (listTypes[i] == 0 ) {
				    this.ddLists.push(new SlottedList());
				    var listId = this.tagId + "_ddList_" + i;
				    this.ddLists[i].load(listId, this.editorLookupId, this.listLookupIds[i], (this.systemLevel+1), this.numIntervals, i, this.xml);							
			    } else {
				    if (!containerPushed) {
					    this.sortableListArray.push(this.tagId + '_dragContainer');
					    containerPushed = true;
				    }
				    this.ddLists.push(new TimeLineList());
				    var listId = this.tagId + "_ddList_" + i;
				    if (activeEditorPageId == 'multiPackage') {
				        var packageXML = this.xml.getElementsByTagName('PACKAGE')[i];
				        this.ddLists[i].load(listId, this.editorLookupId, this.listLookupIds[i], (this.systemLevel+1), this.numIntervals, i, packageXML);
				    } else {
				        this.ddLists[i].load(listId, this.editorLookupId, this.listLookupIds[i], (this.systemLevel+1), this.numIntervals, i, this.xml);
				    }
				    this.sortableListArray.push(listId);
			    }
		    }
		    // load cue strings
		    if ( (this.systemLevel == 1) && (activeEditorPageId != 'liveControl') && (activeEditorPageId != 'multiPackage') ){
		        var packageSpots = xml.getElementsByTagName('PACKAGESPOT');
		        for (var i=0, len=packageSpots.length; i<len; i++) {
		            //if ( (packageSpots[i].getAttribute('CueString') != '') && (packageSpots[i].getAttribute('CueString') != null) &&
		            //    (packageSpots[i].getAttribute('CueString').toUpperCase() != 'NULL') && (packageSpots[i].getAttribute('Time') != null) ) {
		            if (!packageSpots[i].hasChildNodes()) {
		                var cueString = new CueString();
		                var time = parseXMLDate(packageSpots[i].getAttribute('Time'));
		                var timeStr = time[4] + ":" + time[5];
	                    cueString.load(timeStr, packageSpots[i].getAttribute('CueString'));
	                    this.cues.push(cueString);
	                }
	            }
		    } else if (this.systemLevel == 2) {
		        var eventSpots = xml.getElementsByTagName('EVENTSPOT');
		        for (var i=0, len=eventSpots.length; i<len; i++) {
		            //if ( (eventSpots[i].getAttribute('CueString') != '') && (eventSpots[i].getAttribute('CueString') != null) &&
		            //    (eventSpots[i].getAttribute('CueString').toUpperCase() != 'NULL') && (eventSpots[i].getAttribute('Time') != null) ) {
		            if (!eventSpots[i].hasChildNodes()) { 
		                var cueString = new CueString();
		                var time = parseXMLDate(eventSpots[i].getAttribute('Time'));
		                var timeStr = time[4] + ":" + time[5];
	                    cueString.load(timeStr, eventSpots[i].getAttribute('CueString'));
	                    this.cues.push(cueString);
	                }
	            }
		    }
		}
	},
	
	// function to save all properties to DB (only for schedule editor now)
//	save: function () {
//		if (this.systemLevel == 0) {
//		    // check to see that all lists have deleted their items
//		    for (i=0; i<this.ddLists.length; i++) {
//		        //if (this.ddLists[i].deleted == false) {
//		            this.ddLists[i].deleteItems();
//		            //return;
//		        //}
//		    }

//            // bulk load new list data
//            var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
//            xmlStr += "<ROOT>";
//            var xmlItems = "";
//            for (var i=0, len=this.ddLists.length; i<len; i++) {
//                xmlItems += this.ddLists[i].saveItems();
//            }
//            if (xmlItems != "") {  // if there are items to save, proceed with ajax request
//                xmlStr += xmlItems;
//                xmlStr += "</ROOT>";
//                this.request['list'] = new XMLHttpRequest();
//                var url = "AjaxPost.aspx";
//                this.request['list'].open('POST', url, true);
//                this.request['list'].setRequestHeader("Content-Type", "text/xml");
//                this.request['list'].send(xmlStr);	
//                this.request['list'].onreadystatechange = this.processListSaveStateChange.bindAsEventListener(this);
//            }
//        }
//	},

    // function to save all properties to DB (only for schedule editor now)
	save: function () {
		if (this.systemLevel == 0) {
            // bulk load new list data  WGO: NO NEED TO PASS LOOKUP DATES, THIS IS HANDLED IN BULK LOAD, EMPTY LISTS HAVE PACKAGEID=-1
//            var scheduleDates = "";
//            for (var i=0, len=this.listLookupIds.length; i<len; i++) {
//                scheduleDates += this.listLookupIds[i] + ",";
//            }
//            scheduleDates = scheduleDates.substr(0,scheduleDates.length-1);
            var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
            xmlStr += "<ROOT>";
            //xmlStr += "<STOREDPROCEDURE Name=\"sproc_WEB_UpdateFromBLSchedule\" ScheduleDates=\"" + scheduleDates + "\" />";
            xmlStr += "<STOREDPROCEDURE Name=\"sproc_WEB_UpdateFromBLSchedule\" />";
            var xmlItems = "";
            for (var i=0, len=this.ddLists.length; i<len; i++) {
                xmlItems += this.ddLists[i].saveItems();
            }
            if (xmlItems != "") {  // if there are items to save, proceed with ajax request
                xmlStr += xmlItems;
                xmlStr += "</ROOT>";
                this.request['list'] = new XMLHttpRequest();
                var url = "AjaxPost.aspx";
                this.request['list'].open('POST', url, true);
                this.request['list'].setRequestHeader("Content-Type", "text/xml");
                this.request['list'].send(xmlStr);	
                this.request['list'].onreadystatechange = this.processListSaveStateChange.bindAsEventListener(this);
            }
        }
	},

	processListSaveStateChange: function () {
		if (this.request['list'].readyState == 4) {
			if (this.request['list'].status == 200) {
				// reset lists to deleted = false
//				if (this.request['list'].responseXML != null) {
//			        for (i=0; i<this.ddLists.length; i++) this.ddLists[i].deleted = false;
//			    }
                if (this.request['list'].responseText == 1) {
                    var scheduleDates = "";
                    for (var i=0, len=this.listLookupIds.length; i<len; i++) {
                        scheduleDates += this.listLookupIds[i].substr(0,this.listLookupIds[i].length-5) + ", ";
                    }
                    scheduleDates = scheduleDates.substr(0,scheduleDates.length-2);
			        var msgNode = $('scheduleEditor_Messages')
			        msgNode.style.color = "Green";
			        msgNode.innerHTML = "Successfully saved schedules: " + scheduleDates;
			        msgNode.style.display = "block";
			    
			        setPageModified(false);
			    } else {
			        var msgNode = $('scheduleEditor_Messages')
			        msgNode.style.color = "Red";
			        msgNode.innerHTML = "Error during save.  Please try again.";
			        msgNode.style.display = "block";
			    }
			}
		} 
	},
	
	processPageSaveStateChange: function () {
		if (this.request['page'].readyState == 4) {
			if (this.request['page'].status == 200) {
			    if (this.request['page'].responseXML != null) {
			        // update page header
			        if (activeEditorPageId == 'packageEditor') {
			            var header = packageEditorHeader.innerHTML;
			            header = header.substring(0, header.indexOf('Package:')+9);
			            header += $('packageEditor_Name').value.trim();
			            packageEditorHeader.innerHTML = header;
			        } else if (activeEditorPageId == 'eventEditor') {
			            var header = eventEditorHeader.innerHTML;
			            header = header.substring(0, header.indexOf('Event:')+7);
			            header += $('eventEditor_Name').value.trim();
			            eventEditorHeader.innerHTML = header;
			        } else if (activeEditorPageId == 'comboEditor') {
			            var header = comboEditorHeader.innerHTML;
			            header = header.substring(0, header.indexOf('Combo:')+7);
			            header += $('comboEditor_Name').value.trim();
			            comboEditorHeader.innerHTML = header;
			        } else if (activeEditorPageId == 'assetEditor') {
			            var header = assetEditorHeader.innerHTML;
			            header = header.substring(0, header.indexOf('Asset:')+7);
			            header += $('assetEditor_Name').value.trim();
			            assetEditorHeader.innerHTML = header;
			        }
			    }
			    // update packages on previous page 
			    
				alert("Successful Page Save");
				setPageModified(false);
			}
		} 
	},	
	
	// function to render the editor and attach to DOM (only to be called once)
	render: function () {
		// create containing editor div
		var editorContainer = document.createElement('div');
		editorContainer.id = this.tagId;
		$(this.containerId).appendChild(editorContainer);
		
		// create row with icon and buttons
		var buttonRow = document.createElement('div');
		buttonRow.id = "editorHeader";
		buttonRow.style.height = "30px";
		buttonRow.style.width = this.editorWidth + "px";
		editorContainer.appendChild(buttonRow);
		
		// create draggable element container
		this.dragContainer = document.createElement('div');
		this.dragContainer.className = "dragContainer";
		this.dragContainer.id = this.tagId + "_dragContainer";
		this.dragContainer.style.width = "100px";
		this.dragContainer.style.height = "18px";
		buttonRow.appendChild(this.dragContainer);
		
		var buttonsDiv = this.ddButtons.render();
		buttonsDiv.id = "buttons";
		buttonRow.appendChild(buttonsDiv);
		
		// create editor header
		var headerDiv = document.createElement('div');
		headerDiv.id = this.tagId + "_titleBar";
		headerDiv.className = "editorTitleBar";
		//headerDiv.style.height = this.cellHeight + "px";
		headerDiv.style.width = this.editorWidth + "px";
		// create time column and attach to header
		var timeHeader = document.createElement('div');
		timeHeader.className = "time";
		timeHeader.innerHTML = "TIME";
		timeHeader.style.width = this.timeColWidth + "px";
		timeHeader.style.padding = "0 " + this.cellPadding + "px";
		headerDiv.appendChild(timeHeader);
		// create other column headers and margins and attach to header
		var listHeader;
		for (var i=0; i<this.numLists; i++) {
			// create margins if desired
			if (this.spacerWidth > 0) {
			var colDiv = document.createElement('div');
				colDiv.className = "col";
				colDiv.style.width = this.spacerWidth + "px";
				colDiv.style.height = "10px" // include height to make columns appear
				headerDiv.appendChild(colDiv);
			}
			// create list titles
			listHeader = document.createElement('div');
			listHeader.id = this.tagId + "_ddList_" + i + "_header";
			listHeader.className = "header";
			listHeader.innerHTML = this.headerText[i];
			listHeader.style.width = this.cellWidth + "px";
			listHeader.style.padding = "0 " + this.cellPadding + "px";
			headerDiv.appendChild(listHeader);

		}
		// attach header to DOM
		editorContainer.appendChild(headerDiv);
		
		// create editor body with time column and lists
		var editorBody = document.createElement('div');
		editorBody.className = "editor";
		editorBody.id = this.editorBodyId;
		editorBody.style.width = this.editorWidth + "px";
		
		editorContainer.appendChild(editorBody);
		
		// create time column and get editor height
		var timeCol = this.renderTimeColumn();
		editorBody.appendChild(timeCol);
		var colHeight = timeCol.getHeight();
		
		// create spacers and lists
		for (var i=0; i<this.numLists; i++) {
			// create margins
			if (this.spacerWidth > 0) {
				var colDiv = document.createElement('div');
				colDiv.className = "col";
				colDiv.id = this.tagId + "_margin_" + i;
				colDiv.style.width = this.spacerWidth + "px";
				colDiv.style.height = colHeight + "px";
				editorBody.appendChild(colDiv);
			}
			// create drag/drop lists
			var listContainer = this.ddLists[i].render();

			listContainer.style.height = timeCol.getHeight() + "px";
			editorBody.appendChild(listContainer);
			
			// load items into list
			if (this.systemLevel == 0) {
			     this.ddLists[i].requestPackageSpots();
			} else {
			    this.ddLists[i].loadItems();
			}
			
			if (this.systemLevel == 0) {
				listContainer.style.width = listContainer.firstDescendant().getWidth() + "px";
			}
		}

		// add one more column for schedule editor
		if (this.systemLevel == 0) {
            if (this.spacerWidth > 0) {
                var colDiv = document.createElement('div');
                colDiv.className = "col";
                colDiv.style.width = this.spacerWidth + "px";
                colDiv.style.height = colHeight + "px";
                editorBody.appendChild(colDiv);
            }
            editorBody.style.height = (colHeight-1) + "px";
		    editorBody.style.borderRight = "solid 1px #000";
		    editorBody.style.borderBottom = "solid 1px #000";  
		    
		    // also add rows and cols for start and end date checks
		    var footer = document.createElement('div');
		    footer.style.display = "block";
		    footer.style.overflow = "hidden";
		    footer.style.width = this.editorWidth + "px";
		    footer.style.borderRight = "solid 1px #000";
		    footer.style.borderBottom = "solid 1px #000";
		    footer.id = this.tagId + "_footer";
		    
		    // create col for start/end date titles
		    var colDiv = document.createElement('div');
            colDiv.className = "col";
            colDiv.style.width = timeCol.getWidth()-2 + "px";
            //colDiv.style.height = (this.cellHeight*2) + "px";
            
            var startDateTitle = document.createElement('div');
		    startDateTitle.id = this.tagId + "_startDateTitle";
		    startDateTitle.innerHTML = "&nbsp;Start Dates";
		    startDateTitle.style.width = timeCol.getWidth()-2 + "px";
		    startDateTitle.style.height = this.cellHeight + "px";
		    startDateTitle.style.borderBottom = "solid 1px #000";
		    startDateTitle.style.backgroundColor = "#27B504";
		    startDateTitle.className = "footerCellTitle";
		    
		    var endDateTitle = document.createElement('div');
		    endDateTitle.id = this.tagId + "_endDateTitle";
		    endDateTitle.innerHTML = "&nbsp;End Dates";
		    endDateTitle.style.width = timeCol.getWidth()-2 + "px";
		    endDateTitle.style.height = this.cellHeight + "px";
		    endDateTitle.style.backgroundColor = "#DB3535";
		    endDateTitle.className = "footerCellTitle";
		    
		    colDiv.appendChild(startDateTitle);
		    colDiv.appendChild(endDateTitle);
		    footer.appendChild(colDiv);
		    
		    for (var i=0; i<this.numLists; i++) {
			    // create margins
			    if (this.spacerWidth > 0) {
				    var colDiv = document.createElement('div');
				    colDiv.className = "col";
				    colDiv.id = this.tagId + "_footerMargin_" + i;
				    colDiv.style.width = this.spacerWidth+2 + "px";
				    colDiv.style.height = this.cellHeight + "px";
				    footer.appendChild(colDiv);
			    }
			    // create cells for start/end date counts
			    var startEndContainer = document.createElement('div');
			    startEndContainer.style.width = (this.cellWidth + 2*this.cellPadding) + "px";
			    //startEndContainer.style.height = (this.cellHeight*2) + "px";
			    startEndContainer.className = "col";
			    
			    var startDateCell = document.createElement('div');
			    startDateCell.id = this.tagId + "_startDate_" + this.listLookupIds[i];
			    startDateCell.style.width = (this.cellWidth + 2*this.cellPadding) + "px";
			    startDateCell.style.height = this.cellHeight + "px";
			    startDateCell.style.backgroundColor = "#27B504";
			    startDateCell.style.borderBottom = "solid 1px #000";
			    startDateCell.className = "footerCell";
			    var startDateCount = this.requestStartDateCount(this.listLookupIds[i]);
			    if (startDateCount && startDateCount > 0) {
			        startDateCell.innerHTML = "&nbsp;Total Count: " + startDateCount;
			        startDateCell.setAttribute('onclick', 'activeEditor.showAssetDateReport(this);');
			    } else {
			        startDateCell.style.backgroundColor = "#fff";
			    }
			    
			    var endDateCell = document.createElement('div');
			    endDateCell.id = this.tagId + "_endDate_" + this.listLookupIds[i];
			    endDateCell.style.width = (this.cellWidth + 2*this.cellPadding) + "px";
			    endDateCell.style.height = this.cellHeight + "px";
			    endDateCell.style.backgroundColor = "#DB3535";
			    endDateCell.className = "footerCell";
			    var endDateCount = this.requestEndDateCount(this.listLookupIds[i]);
			    if (endDateCount && endDateCount > 0) {
			        endDateCell.innerHTML = "&nbsp;Total Count: " + endDateCount;
			        endDateCell.setAttribute('onclick', 'activeEditor.showAssetDateReport(this);');
			    } else {
			        endDateCell.style.backgroundColor = "#fff";
			    }
			    
			    startEndContainer.appendChild(startDateCell);
			    startEndContainer.appendChild(endDateCell);
			    
			    footer.appendChild(startEndContainer);
			    
			    editorContainer.appendChild(footer);
			}
		      
        } else {
		    editorBody.style.width = (this.editorWidth+1) + "px";
		    editorBody.style.height = (colHeight < 600) ? ((colHeight+this.cellHeight+1) + "px") : ("600px");
		    editorBody.style.overflow = "scroll";
		}	
		
		// render and load cue strings for packages and events
	    if (this.systemLevel == 1 || this.systemLevel == 2) {
	        if ( (activeEditorPageId != 'liveControl') && (activeEditorPageId != 'multiPackage') ) {
	            // add header
	            var container = (this.systemLevel == 1) ? $('packageEditorCues') : $('eventEditorCues');
	            var row = document.createElement('div');
	            row.className = "row";
                row.style.width = "880px;";
	            var col1 = document.createElement('div');
	            col1.className = "col";
	            var timeLbl = document.createElement('label');
	            timeLbl.style.marginLeft = "100px";
	            timeLbl.style.width = "64px";
	            timeLbl.innerHTML = "Time";
	            var spacer = document.createElement('div');
	            spacer.className = "spacerL";
	            var col2 = document.createElement('div');
	            col2.className = "col";
	            var cueLbl = document.createElement('label');
	            cueLbl.innerHTML = "Cue String";
	            col1.appendChild(timeLbl);
	            //col.appendChild(spacer);
	            col2.appendChild(cueLbl);
	            row.appendChild(col1);
	            row.appendChild(spacer);
	            row.appendChild(col2);
	            container.appendChild(row);
	            if (this.cues.length > 0) {
	                for (var j=0, jlen=this.cues.length; j<jlen; j++) {
	                    // render cuestring
	                    var cueStringRow = this.cues[j].render();
                	    
	                    // get container
	                    //var container = (this.systemLevel == 1) ? $('packageEditorCues') : $('eventEditorCues');
	                    container.appendChild(cueStringRow);
	                }
	            } else {
    	            this.addNewCueStringRow();
    	        }
    	    }
	    }		
	},
	
	// function to render time column  (wgo: shorten this if time)
	renderTimeColumn: function () {
		var timeCol = document.createElement('div');
		timeCol.className = "col";
		timeCol.style.width = (this.timeColWidth + this.padding*2) + "px";
		timeCol.id = this.tagId +"_timeCol";
		var hoursInc = this.interval / 3600;
		var minutesInc = this.interval / 60;	
		var secondsInc = this.interval;
		var startHours = this.startTime.getHours();
		var startMinutes = this.startTime.getMinutes();
		var startSeconds = this.startTime.getSeconds();
		if (this.timeColType == 0) {
			for (var i=0; i<this.numIntervals; i++) {
				// create time div and calculate time value
				var timeSlot = document.createElement('div');
				timeSlot.className = "time";
				timeSlot.id = this.tagId + "_timeCol_" + i;
				timeSlot.style.width = this.timeColWidth + "px";
				timeSlot.style.height = this.cellHeight + "px";
				timeSlot.style.padding = "0 " + this.cellPadding + "px";
				var timeSlotStr = "";
				var timeStr = "";
				var amPM = "";
				var hours = Math.floor(startHours + hoursInc * i); 
				(hours < 12) ? (amPM = "AM") : (amPM = "PM");
				timeSlotStr += hours.toPaddedString(2,10);
				hours = (hours == 0) ? 12 : (hours > 12) ? (hours - 12) : hours;
				var minutes = (startMinutes + minutesInc * i) % 60;  // 60 is repeat interval
				timeSlotStr += ":" + minutes.toPaddedString(2,10);
				timeStr += hours.toPaddedString(2,10) + ":" + minutes.toPaddedString(2,10) + " ";
				timeStr += amPM;
				timeSlot.innerHTML = timeStr;
				timeCol.appendChild(timeSlot);
				this.timeSlots.push(timeSlotStr);
				this.timeStrs.push(timeStr);
			}
		} else {
			var minutesInc = this.interval / 60;
			var startMinutes = this.startTime.getMinutes();
			for (var i=0; i<this.numIntervals; i++) {
				// create time div and calculate time value
				var timeSlot = document.createElement('div');
				timeSlot.className = "time";
				timeSlot.id = this.tagId + "_timeCol_" + i;
				timeSlot.style.width = this.timeColWidth + "px";
				timeSlot.style.height = this.cellHeight + "px";
				timeSlot.style.padding = "0 " + this.cellPadding + "px";				
				var timeStr = "";
				var minutes = Math.floor(startMinutes + minutesInc * i) % 60;
				var seconds = Math.floor(startSeconds + secondsInc * i) % 60;
				timeStr += minutes.toPaddedString(2,10) + ":" + seconds.toPaddedString(2,10);
				timeSlot.innerHTML = timeStr;
				if (seconds == 0) timeSlot.style.fontWeight = "bold";
				timeCol.appendChild(timeSlot);
				this.timeSlots.push(timeStr);
				this.timeStrs.push(timeStr);
			}
		}
		return timeCol;
	},
	
	// function to shorten duration of rendered editor (only for event editor - assume timeline)
	shortenDuration: function (duration) {
	    var timeColStr = this.tagId + "_timeCol";
	    var timeCol = $(timeColStr);
	    var timeSlotEls = timeCol.immediateDescendants();
	    // remove rendered elements
	    for (var i=0, len=timeSlotEls.length; i<len; i++) {
	        if (timeSlotEls[i].innerHTML >= duration) timeSlotEls[i].remove();
	    }
	    // remove from timeSlots array
	    for (var i=(this.timeSlots.length-1); i>=0; i--) {
	        if (this.timeSlots[i] >= duration) this.timeSlots.pop();
	    }
	    // remove from timeStrs array
	    for (var i=(this.timeStrs.length-1); i>=0; i--) {
	        if (this.timeStrs[i] >= duration) this.timeStrs.pop();
	    }
        // reset heights of spacers, lists, and editor body
        var colHeight = timeCol.getHeight();
		for (var i=0; i<this.numLists; i++) {
			var spacerDiv = this.tagId + "_margin_" + i;
			$(spacerDiv).style.height = colHeight + "px";
			var listDiv = this.tagId + "_ddList_" + i;
			$(listDiv).style.height = colHeight + "px";
		}
		
		$(this.editorBodyId).style.height = (colHeight < 600) ? ((colHeight+this.cellHeight+1) + "px") : ("600px");
	},
	
	// function to lengthen duration of rendered editor (only for event editor - assume timeline)
	lengthenDuration: function (duration) {
	    var timeColStr = this.tagId + "_timeCol";
	    var timeCol = $(timeColStr);
	    // add new elements
	    //var startTime = duration.split(':');
	    var startTime = this.timeStrs.last().split(':');
	    var minutesInc = this.interval / 60;
	    var secondsInc = this.interval;
	    var startMinutes = ( (((parseInt(startTime[1],10) + secondsInc) % 60) == 0) ) ? (parseInt(startTime[0],10) + 1) : (parseInt(startTime[0],10));
	    var startSeconds = (parseInt(startTime[1],10) + secondsInc) % 60;
		var curTime = startMinutes.toPaddedString(2,10) + ":" + startSeconds.toPaddedString(2,10);
		var index = this.timeSlots.length;
		var counter = 0;
		var secondsOffset = startSeconds / secondsInc;
		while (curTime < duration) {
		//for (var i=0; i<this.numIntervals; i++) {
			// create time string						
			var timeStr = "";
			var minutes = Math.floor(startMinutes + minutesInc * (counter + secondsOffset) ) % 60;
			var seconds = Math.floor(startSeconds + secondsInc * counter) % 60;
			timeStr += minutes.toPaddedString(2,10) + ":" + seconds.toPaddedString(2,10);
            // create time slot div
		    var timeSlot = document.createElement('div');
		    timeSlot.className = "time";
		    timeSlot.id = this.tagId + "_timeCol_" + index++;
		    timeSlot.style.width = this.timeColWidth + "px";
		    timeSlot.style.height = this.cellHeight + "px";
		    timeSlot.style.padding = "0 " + this.cellPadding + "px";
		    timeSlot.innerHTML = timeStr;
		    timeCol.appendChild(timeSlot);
		    this.timeSlots.push(timeStr);
		    this.timeStrs.push(timeStr);
		    curTime = timeStr;
		    counter++
		}
        // reset heights of spacers, lists, and editor body
        var colHeight = timeCol.getHeight();
		for (var i=0; i<this.numLists; i++) {
			var spacerDiv = this.tagId + "_margin_" + i;
			$(spacerDiv).style.height = colHeight + "px";
			var listDiv = this.tagId + "_ddList_" + i;
			$(listDiv).style.height = colHeight + "px";
		}
		
		$(this.editorBodyId).style.height = (colHeight < 600) ? ((colHeight+this.cellHeight+1) + "px") : ("600px");
	},	
	
	// function to activate drag/drop functionality in editor
	activateDD: function () {	
        // check to see that all schedules haved loaded their items
        if (this.systemLevel == 0) {
	        for (i=0; i<this.ddLists.length; i++) {
	            if (this.ddLists[i].loaded == false) return;
	        }
	    }

	    if (this.systemLevel < 3) {
		    // create sortable lists and add drag observers
    	    for (var i=0, ilen=this.sortableListArray.length; i<ilen; i++) {
			    var listId = this.sortableListArray[i];
			    var editorBodyId = $(listId).parentNode.id;
			    Position.includeScrollOffsets = true;
			    if ( (i == 0) || (activeEditorPageId == 'multiPackage') ) {
	    	        Sortable.create(listId, {
		                dropOnEmpty: true,
		                containment:this.sortableListArray,
		                constraint:false,
		                scroll:editorBodyId,
		                onUpdate: function (listA, listB) {
		                    setPageModified(true);
		                }
			        });
			    }
			    if ( (i > 0) && (activeEditorPageId != 'multiPackage') ) {
			        var reducedArray = [];
			        reducedArray.push(this.sortableListArray[0]);
			        reducedArray.push(this.sortableListArray[i]);
			        Sortable.create(listId, {
		                dropOnEmpty:true,
		                containment:reducedArray,
		                constraint:false,
		                scroll:editorBodyId,
		                onUpdate: function (listA, listB) {
		                    setPageModified(true);
//		                    wgo help !!!
//		                    if (activeEditor.systemLevel == 2) {
//	                            var allEmpty = true;
//                                for (var j=0, jlen=activeEditor.ddLists.length; j<jlen; j++) {
//                                    if (activeEditor.ddLists[j].firstDescendant()) {
//                                    //    allEmpty = false;
//                                    //    break;
//                                }
//                                if (allEmpty) {
//                                    //$('eventEditor_Color').style.backgroundColor = dragPeca.style.backgroundColor;
//                                }
//		                    }
		                }
			        });
				    var listEls = $(this.sortableListArray[i]).immediateDescendants();
				    for (var j=0, jlen=listEls.length; j<jlen; j++) {
					    addDragObservers(listEls[j]);
				    }
			    } else if ( (i > 0) && (activeEditorPageId == 'multiPackage') ) {
			        Sortable.create(listId, {
		                dropOnEmpty:true,
		                containment:this.sortableListArray,
		                constraint:false,
		                scroll:editorBodyId,
		                onUpdate: function (listA, listB) {
		                    setPageModified(true);
		                }
			        });
				    var listEls = $(this.sortableListArray[i]).immediateDescendants();
				    for (var j=0, jlen=listEls.length; j<jlen; j++) {
					    addDragObservers(listEls[j]);
				    }
			    }
    	    }
        	
    	    // activate list header events
    	    var headerId = this.tagId + "_titleBar";
    	    var listHeaders = $(headerId).getElementsByClassName('header');
    	    for (var i=0, len=listHeaders.length; i<len; i++) {
    	        Event.observe(listHeaders[i], 'click', this.cachedEventSelectList);
    	        Event.observe(listHeaders[i], 'contextmenu', this.cachedShowListMenu);
    	    }
        }
        
		//activate drags
		//var dragEls = $(this.tagId).getElementsByClassName('dragCell');
		var dragEls = $(this.containerId).getElementsByClassName('dragCell');
		for (var i=0, len=dragEls.length; i<len; i++) {
			//alert(dragEls[i].id);
			addDrag(dragEls[i]);
		}
		
		// activate drops
		//var dropEls = $(this.tagId).getElementsByClassName('dropCell');
		var dropEls = $(this.containerId).getElementsByClassName('dropCell');
		for (var i=0, len=dropEls.length; i<len; i++) {
			addDrop(dropEls[i]);
		}
		
		// activate drops on combo level
		if (this.systemLevel == 3) {
		    var dropEls = $(this.containerId).getElementsByClassName('assetContainer');
		    for (var i=0, len=dropEls.length; i<len; i++) {
			    addDrop(dropEls[i]);
		    }
		}
    	
		$('pageContainer').removeClassName('fadedBG');
		$('loadingMsg').style.display = "none";
	},
	
	// function to deactivate drag/drop functionality in editor
	deactivateDD: function () {
		
		if (this.systemLevel < 3) {
		    // clear selections and clipboard
		    this.clearSelectedCells();
		    this.clearDropHighlight();
		    this.clipboard.clear();
    		
		    // deactivate sortables
    	    for (var i=0, len=this.sortableListArray.length; i<len; i++) {
			    var listId = this.sortableListArray[i];
	    	    Sortable.destroy(listId);
    	    }
        	
    	    // deactivate list header events
		    var headerId = this.tagId + "_titleBar";
    	    var listHeaders = $(headerId).getElementsByClassName('header');
    	    for (var i=0, len=listHeaders.length; i<len; i++) {
    	        Event.stopObserving(listHeaders[i], 'click', this.cachedEventSelectList);
    	        Event.stopObserving(listHeaders[i], 'contextmenu', this.cachedShowListMenu);
    	    }
    	    
    	    // stop observing cue editors
    	    var cueMinuses = document.getElementsByClassName('cueEventMinus');
    	    for (var i=0, len=cueMinuses.length; i<len; i++) {
    	        Event.stopObserving(cueMinuses[i], 'click', this.cachedRemoveCueStringRow);
    	    }
    	    
    	    var cueSelects = document.getElementsByClassName('cueEventSelect');
    	    for (var i=0, len=cueSelects.length; i<len; i++) {
    	        Event.stopObserving(cueSelects[i], 'change', this.cachedUpdateCueInEditor);
    	    }    	      	        
    	}
    	
		// deactivate droppability
		Droppables.drops.clear();
		// deactivate draggability
		for (var i=0, len=Draggables.drags.length; i<len; i++) {
			var drag = Draggables.drags.pop()
			removeDragObservers(drag);
            drag.destroy();
		}
	},
	
	// function to hide editor
	hide: function() {
		$(this.tagId).hide();
	},
	
	// function to hide editor
	show: function() {
		$(this.tagId).show();
	},	
	
	requestStartDateCount: function (date) {
	    // make request to db
	    var sProc = "<STOREDPROCEDURE Name=\"sproc_WEB_GetAssetStartDateCountByDate\" Date=\"" + date + "\" />";
        var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        xmlStr += "<ROOT>";
        xmlStr += sProc;
        xmlStr += "</ROOT>";
        url = "AjaxPost.aspx";
        this.request['startDate'] = new XMLHttpRequest();
        this.request['startDate'].open('POST', url, false);
        this.request['startDate'].setRequestHeader("Content-Type", "text/xml");
        this.request['startDate'].send(xmlStr);
        
    	if (this.request['startDate'].readyState == 4) {
		    if (this.request['startDate'].status == 200) {
		        if (this.request['startDate'].responseText != null) {
                    return this.request['startDate'].responseText;
		        }
		    } else {
		        return;
		    }
	    }
	},
		
	requestEndDateCount: function (date) {
        // make request to db
        var sProc = "<STOREDPROCEDURE Name=\"sproc_WEB_GetAssetEndDateCountByDate\" Date=\"" + date + "\" />";
        var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        xmlStr += "<ROOT>";
        xmlStr += sProc;
        xmlStr += "</ROOT>";
        url = "AjaxPost.aspx";
        this.request['endDate'] = new XMLHttpRequest();
        this.request['endDate'].open('POST', url, false);
        this.request['endDate'].setRequestHeader("Content-Type", "text/xml");
        this.request['endDate'].send(xmlStr);
        
	    if (this.request['endDate'].readyState == 4) {
	        if (this.request['endDate'].status == 200) {
	            if (this.request['endDate'].responseText != null) {
                    return this.request['endDate'].responseText;
	            }
	        } else {
	            return;
	        }
        }
	},	
	
	showAssetDateReport: function (element) {
	    // get parameters
	    var idSplit = element.id.split('_');
	    var sProc = (idSplit[2].match('start')) ? "sproc_WEB_GetAssetStartDatesByDate" : "sproc_WEB_GetAssetEndDatesByDate";
	    var date = idSplit[3];
	    
	    // make request to db
        var sProc = "<STOREDPROCEDURE Name=\"" + sProc + "\" Date=\"" + date + "\" />";
        var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        xmlStr += "<ROOT>";
        xmlStr += sProc;
        xmlStr += "</ROOT>";
        url = "AjaxPost.aspx";
        this.request['assetDate'] = new XMLHttpRequest();
        this.request['assetDate'].open('POST', url, false);
        this.request['assetDate'].setRequestHeader("Content-Type", "text/xml");
        this.request['assetDate'].send(xmlStr);
        
	    if (this.request['assetDate'].readyState == 4) {
	        if (this.request['assetDate'].status == 200) {
	            if (this.request['assetDate'].responseXML != null) {
	                var startEnd = (idSplit[2].match('start')) ? "start" : "end";
                    this.viewStartEndDateReport(startEnd, date);
	            }
	        } else {
	            return;
	        }
        }
	},

    viewStartEndDateReport: function (startEnd, date) {
        var xml = this.request['assetDate'].responseXML;
        var span = $('startEndDate_span');
        if (startEnd == "start") {
            span.innerHTML = "Assets Starting on " + date;
        } else {
            span.innerHTML = "Assets Ending on " + date;
        }
        
        var container = $('startEndDate_Inner');
        // clear out any previous report
        var prevLines = container.immediateDescendants();
        for (var i=0, len=prevLines.length; i<len; i++) {
            prevLines[i].remove();
        }

        // get new report and append to container
        var assets = xml.getElementsByTagName('ASSET');
        for (var i=0, len=assets.length; i<len; i++) {
            var row = document.createElement('div');
            row.className = "row";
            row.innerHTML = "&#149; " + assets[i].getAttribute('Name');
            container.appendChild(row);
        }
        $('startEndDatePopup').style.display = "block";
    },
		
	// given an element, this function returns the DraggablePeca object that contains it
	getPeca: function (element) {
		try {
		    var activePecaIndex = parseInt(element.id.substr(element.id.indexOf('peca') + 5),10);
		    return this.draggablePecas[activePecaIndex];
		}
		catch (err) {
		    return null;
		}
	},
	
	// given an element's id, this function returns the DraggablePeca object that contains it
	getPecaById: function (elementId) {
		var activePecaIndex = parseInt(elementId.substr(elementId.indexOf('peca') + 5),10);
		return this.draggablePecas[activePecaIndex];
	},
	
	// event handler to create or update draggable element above the editor
	eventUpdateIcon: function (e) {
		var eventEl = Event.element(e);
		this.updateIcon(eventEl.id);
	},
	
	// function to create or update draggable element above the editor
	updateIcon: function (elementId) {		

        this.updateGetInfo(elementId);

		// first check to see if element is the icon
		if ($(elementId)) {
		    if ($(elementId).parentNode == this.dragContainer) return;
		}
	
		var activePeca = this.getPecaById(elementId);
		var dragEl = this.dragContainer.firstDescendant();
		if (dragEl) {  // overwrite dragpeca with active peca properties
		    var dragPeca = this.getPecaById(dragEl.id);
		    activePeca.overwrite(dragPeca, dragEl);
		} else { 
		    // create new Peca based on event element
		    var newPeca = activePeca.copy();
		    var newPecaEl = newPeca.render();
		    var dimensions = this.dragContainer.getDimensions();
		    if (this.systemLevel < 3) {
		        newPecaEl.style.padding = "0 " + this.cellPadding + "px";
		        newPecaEl.style.height = (dimensions.height-2) + "px";	
		        newPecaEl.style.width = (dimensions.width - (this.cellPadding*2) - 2) + "px";	
		    } else {
		        newPecaEl.style.height = (dimensions.height-2) + "px";	
		        newPecaEl.style.width = (dimensions.width - 2) + "px";
		    }
    		
		    this.dragContainer.appendChild(newPecaEl);
		    addDrag(newPecaEl);
		    this.draggablePecas.push(newPeca);
		}
	},
	
	// function to update get info panel
	updateGetInfo: function (elementId) {	
	    // dont't make db call if window is hidden
	    if ( ($('getInfoPanel').style.display == 'none') || ($('getInfoPanel').style.display == '') ) return;
	    this.request['getInfo'] = new XMLHttpRequest();
	    if ( (activeEditorPageId == 'liveControl') && (searchChoice == 'Package') ) {
	        var sProc = "<STOREDPROCEDURE Name=\"sproc_WEB_GetInfo\" ID=\"" + elementId + "\" Level=\"1\" />";
	        callAjaxPost(this.request['getInfo'], sProc, activeEditor.cachedProcessGetInfo);
        } else {
	        var activePeca = this.getPecaById(elementId);
	        var sProc = "<STOREDPROCEDURE Name=\"sproc_WEB_GetInfo\" ID=\"" + activePeca.dbId + "\" Level=\"" + activePeca.itemType + "\" />";
	        callAjaxPost(this.request['getInfo'], sProc, activeEditor.cachedProcessGetInfo);
	    }
	},	
	
	// function to process get info request
	processGetInfo: function () {
	    if (this.request['getInfo'].readyState == 4) {
			if (this.request['getInfo'].status == 200) {
				if (this.request['getInfo'].responseXML != null) {
				    // hide "Nothing selected"
				    $('getInfo_NothingSelected').style.display = "none";
				    $('getInfo_MultipleSelected').style.display = "none";
				    
				    var container = $('infoInner');
				    // delete any previous contents
				    var currentEls = container.immediateDescendants();
				    for (var i=0, len=currentEls.length; i<len; i++) {
				        currentEls[i].remove();
				    }
				    
				    // loop through returned xml and display info
				    
				    var infoEls = this.request['getInfo'].responseXML.getElementsByTagName('GetInfo');
				    for (var i=0, len=infoEls.length; i<len; i++) {
				        var label = document.createElement('dt');
				        label.innerHTML = infoEls[i].getAttribute('Name') + ": ";
				        var description = document.createElement('dd');
				        description.innerHTML = infoEls[i].getAttribute('Value');
				        container.appendChild(label);
				        container.appendChild(description);
				    }
				}
			}
		} 
	},

	// function to copy item to clip
	copyToClip: function () {		
		if (!this.selectedCell  && !this.selectedList && (this.selectedRegion.length<1)) return;
		
		if (this.selectedCell) {
		    var selected = this.selectedCell;
		    if (selected.match('div')) {
			    if (selected.firstDescendant()) {
				    selected = selected.firstDescendant();
			    }
		    }
		    if (!selected) return;
		    var activePeca = this.getPeca(selected);
    		
		    this.clipboard.clear();
		    this.clipboard.push(activePeca);
		} else if (this.selectedList) {
		    this.clipboard.clear();
		    var listEls = this.selectedList.immediateDescendants();
		    if (this.selectedList.match('div')) { // slotted list
		        for (var i=0, len=listEls.length; i<len; i++) {
		            if (listEls[i].firstDescendant()) {
		                this.clipboard.push(this.getPeca(listEls[i].firstDescendant()));
		            } else {
		                this.clipboard.push(null);
		            }
		        }
		        // remove nulls at the end
		        while (this.clipboard.length > 0) {
		            if (this.clipboard.last() == null) {
		                this.clipboard.pop();
		            } else {
		                break;
		            }
		        }
		    } else { // timeline list
		        for (var i=0, len=listEls.length; i<len; i++) {
		            this.clipboard.push(this.getPeca(listEls[i]));
		        }
		    }
		} else if (this.selectedRegion.length > 0) {
		    this.clipboard.clear();
		    var selectedCells = this.selectedRegion;
		    if (selectedCells[0].match('div')) { // slotted list
		        for (var i=0, len=selectedCells.length; i<len; i++) {
		            if (selectedCells[i].firstDescendant()) {
		                this.clipboard.push(this.getPeca(selectedCells[i].firstDescendant()));
		            } else {
		                this.clipboard.push(null);
		            }
		        }
		        // remove nulls at the end
		        while (this.clipboard.length > 0) {
		            if (this.clipboard.last() == null) {
		                this.clipboard.pop();
		            } else {
		                break;
		            }
		        }	
		    } else { // timeline list
		        for (var i=0, len=selectedCells.length; i<len; i++) {
		            this.clipboard.push(this.getPeca(selectedCells[i]));
		        }
		    }  
		}
	},
	
	// function to cut item to clip and remove from editor
	cutToClip: function () {		
	
		this.copyToClip();
		
		if (this.selectedCell) {
		    var selected = this.selectedCell;
		    if (selected.match('div')) {
			    if (selected.firstDescendant()) {
				    selected = selected.firstDescendant();
			    }
		    }
		    if (!selected) return;
		    removeDragObservers(selected);
		    selected.remove();
		} else if (this.selectedList) {
		    var listEls = this.selectedList.immediateDescendants();
		    if (this.selectedList.match('div')) { // slotted list
		        for (var i=0, len=listEls.length; i<len; i++) {
		            if (listEls[i].firstDescendant()) {
		                removeDragObservers(listEls[i].firstDescendant());
		                listEls[i].firstDescendant().remove();
		            }
		        }
		    } else { // timeline list
		        for (var i=0, len=listEls.length; i<len; i++) {
		            removeDragObservers(listEls[i]);
		            listEls[i].remove();
		        }
		    }
		} else if (this.selectedRegion.length > 0) {
		    var selectedCells = this.selectedRegion;
		    if (selectedCells[0].match('div')) { // slotted list
		        for (var i=0, len=selectedCells.length; i<len; i++) {
		            if (selectedCells[i].firstDescendant()) {
		                removeDragObservers(selectedCells[i].firstDescendant());
		                selectedCells[i].firstDescendant().remove();
		            }
		        }
		    } else {
		        for (var i=0, len=selectedCells.length; i<len; i++) {
		            removeDragObservers(selectedCells[i]);
		            selectedCells[i].remove();
		        }
		    }
		}		
		
		this.clearSelectedCells();
		setPageModified(true);
	},
	
	// function to alert user first before clearing list
	checkClearList: function () {
	    var spanTxt = "Warning";
        var labelTxt = "Are you sure you want to clear the contents of this list?";
        var onClickYes = "hideYesNoAlert(); activeEditor.clearList();";
        var onClickNo = "hideYesNoAlert();";
        showYesNoAlert(spanTxt, labelTxt, onClickYes, onClickNo);
	},
	
	// function to clear list when right-clicking
	clearList: function () {
	    // only for use with right-clicking a list
	    if (!this.selectedList) return;
	    var listEls = this.selectedList.immediateDescendants();
	    if (this.selectedList.match('div')) {  // clear slotted list
	        for (var i=0, len=listEls.length; i<len; i++) {
	            if (listEls[i].firstDescendant()) {
	                removeDragObservers(listEls[i].firstDescendant());
	                listEls[i].firstDescendant().remove();
	            }
	        }
	    } else { // clear timeline
	        for (var i=0, len=listEls.length; i<len; i++) {
	            removeDragObservers(listEls[i]);
	            listEls[i]. remove();
	        }
	        // clear selected cells or else header remains selected
	        this.clearSelectedCells();
	    }
	},
	
	// function to check if paste is possible and if so, then proceed
	checkPasteFromClip: function () {
	    if (!this.selectedCell && !this.selectedList) return;
	    if (this.clipboard.length < 1) return;
	    
	    if (this.selectedCell) {
	        // get number of paste items
	        var numPasteItems = this.clipboard.length;
	        var selected = this.selectedCell;
	        if (selected.match('div')) {  // on slotted list check paste spots
	            var rowIndex = parseInt(selected.id.substr(selected.id.indexOf('drop_')+5),10);
	            var selectedListId = selected.id.substring(0,selected.id.indexOf('_drop'));
	            var listEls = $(selectedListId).immediateDescendants();
	            
	            // check if there's enough room
	            if (numPasteItems > (listEls.length - rowIndex)) {  // then there's not enough room
	                var spanTxt = "Alert";
                    var labelTxt = "There is not enough room to paste all the items from the clipboard";
                    var onClickOK = "hideAlertPopup();"
                    showAlertPopup(spanTxt, labelTxt, onClickOK);
	                return;
	            }
	            
	            // check if any of the paste spots are occupied
	            for (var i=rowIndex, len=(numPasteItems+rowIndex); i<len; i++) {
	                if (listEls[i].firstDescendant()) {
	                    var spanTxt = "Warning";
                        var labelTxt = "Some currently scheduled items will be replaced during paste.  Continue?";
                        var onClickYes = "hideYesNoAlert(); activeEditor.pasteFromClip();";
                        var onClickNo = "hideYesNoAlert();";
                        showYesNoAlert(spanTxt, labelTxt, onClickYes, onClickNo);
	                    return;
	                }
	            }
	        } else {  // on timeline list check event editor for channels
	            if (this.systemLevel == 2) {
	                var selectedPeca = this.getPeca(selected);
	                var clipPeca = this.clipboard.first();
	                var selectedChannel = parseInt(selectedPeca.channelsNN.split(',')[1],10);
	                var clipChannel = parseInt(clipPeca.channelsNN.split(',')[1],10);
	                if (selectedChannel != clipChannel) {
	                    var spanTxt = "Alert";
                        var labelTxt = "Unable to paste because the current clipboard items belong to a different display surface";
                        var onClickOK = "hideAlertPopup();"
                        showAlertPopup(spanTxt, labelTxt, onClickOK);
	                    return;
	                }
	            }
	        }
	    } else if (this.selectedList) {  // assume slotted list
	        if (this.systemLevel == 0) {
	            // get number of paste items and list elements
	            var numPasteItems = this.clipboard.length
                var listEls = this.selectedList.immediateDescendants();
                // check if any of the paste spots are occupied
                for (var i=0, len=numPasteItems; i<len; i++) {
                    if (listEls[i].firstDescendant()) {
                        var spanTxt = "Warning";
                        var labelTxt = "Some currently scheduled items will be replaced during paste.  Continue?";
                        var onClickYes = "hideYesNoAlert(); activeEditor.pasteFromClip();";
                        var onClickNo = "hideYesNoAlert();";
                        showYesNoAlert(spanTxt, labelTxt, onClickYes, onClickNo);
                        //alert('Some currently scheduled items will be replaced during paste.  Aborting.');
                        return;
                    }
                } 
            } else if (activeEditorPageId == 'multiPackage') {
                var listEls = this.selectedList.immediateDescendants();
                if (listEls.length > 0) {
                    var spanTxt = "Warning";
                    var labelTxt = "All current list items will be replaced during paste.  Continue?";
                    var onClickYes = "hideYesNoAlert(); activeEditor.pasteFromClip();";
                    var onClickNo = "hideYesNoAlert();";
                    showYesNoAlert(spanTxt, labelTxt, onClickYes, onClickNo);
                    //alert('Some currently scheduled items will be replaced during paste.  Aborting.');
                    return;
                }
            }
        }
        this.pasteFromClip();
	},
	
	// function to paste item from clipboard
	pasteFromClip: function () {
	    if (!this.selectedCell && !this.selectedList) return;
	    if (this.clipboard.length < 1) return;
	    
	    if (this.selectedCell) {
	        // get number of paste items
	        var numPasteItems = this.clipboard.length;
	        var selected = this.selectedCell;
	        
	        if (selected.match('div')) {  // on slotted list check paste spots
	            var rowIndex = parseInt(selected.id.substr(selected.id.indexOf('drop_')+5),10);
	            var selectedListId = selected.id.substring(0,selected.id.indexOf('_drop'));
	            var listEls = $(selectedListId).immediateDescendants();

	            // ONLY SELECT FIRST CELL IN GROUP
	            for (var i=0; i<numPasteItems; i++) {
//	                selected.className = "selectedDropCell";
                    selected.className = "dropCell";
	                this.selectedRegion.push(selected);
	                if (selected.firstDescendant()) {
	                    removeDragObservers(selected.firstDescendant());
	                    selected.firstDescendant().remove();
	                }
	                if (this.clipboard[i] == null) {
	                    if (selected.next()) selected = selected.next();
	                    continue;
	                }
	                var clipPeca = this.clipboard[i];
    	    		var pastePeca = clipPeca.copy();
    	    		var pastePecaEl = pastePeca.render();	
    	    		pastePecaEl.style.height = this.cellHeight + "px";
    	    		selected.style.height = this.cellHeight + "px";
		            this.draggablePecas.push(pastePeca);
		            selected.appendChild(pastePecaEl);	
		            addDrag(pastePecaEl);
		            this.validatePackage(pastePecaEl, selected);
		            if (selected.next()) selected = selected.next();
		        }
		        // depending on paste, either selectedRegion or selectedCell will have a value
		        //if (this.selectedRegion.length == 1) {
		            this.selectedCell = this.selectedRegion.last();
		            this.selectedRegion.clear();
		            this.selectCell(this.selectedCell.firstDescendant());
		        //} else {
		        //    this.selectedCell = null;
		        //    this.enableDisableSelectOptions(false, false, false);
		        //}
		    } else {  // paste into timeline list (no restrictions, just insert)
		        this.clearSelectedCells();
			    var parent = selected.parentNode;
	            for (var i=0; i<numPasteItems; i++) {
	                var clipPeca = this.clipboard[i];
    	    		var pastePeca = clipPeca.copy();
    	    		var pastePecaEl = pastePeca.render();	
		            this.draggablePecas.push(pastePeca);				    
			        if (selected.nextSiblings().length > 0) {
			            var next = selected.next();
				        parent.insertBefore(pastePecaEl, next);
			        } else {  // paste to end of list
				        parent.appendChild(pastePecaEl);
			        }
			        pastePecaEl.className = "selectedDragLi";
			        this.selectedRegion.push(pastePecaEl);
			        addDrag(pastePecaEl);
			        //this.selectCell(pastePecaEl);
			        selected = selected.next();
			    }
			    // depending on paste, either selectedRegion or selectedCell will have a value
		        if (this.selectedRegion.length == 1) {
		            this.selectedCell = this.selectedRegion.pop();
		            this.selectedRegion.clear();
		            this.selectCell(this.selectedCell);
		        } else {
		            this.selectedCell = null;
		            this.enableDisableSelectOptions(false, false, false);
		        }
		    }
		} else if (this.selectedList) {  
	        if (this.systemLevel == 0) {
	            // get number of paste items and list elements
	            var numPasteItems = this.clipboard.length;
                var listEls = this.selectedList.immediateDescendants();
                // paste items
                for (var i=0, len=listEls.length; i<len; i++) {
                    if (listEls[i].firstDescendant()) listEls[i].firstDescendant().remove();
                    if (this.clipboard[i] == null) continue;
                    var clipPeca = this.clipboard[i];
	    		    var pastePeca = clipPeca.copy();
	    		    var pastePecaEl = pastePeca.render();	
	                this.draggablePecas.push(pastePeca);
	                listEls[i].appendChild(pastePecaEl);	
	                addDrag(pastePecaEl);
	                this.validatePackage(pastePecaEl, listEls[i]);
	            }  
	            this.enableDisableSelectOptions(false, false, false);     
	        } else if (activeEditorPageId == 'multiPackage') {
	            var parent = this.selectedList;
	            this.clearList();
	            this.clearSelectedCells();
	            var numPasteItems = this.clipboard.length;
	            for (var i=0; i<numPasteItems; i++) {
	                var clipPeca = this.clipboard[i];
    	    		var pastePeca = clipPeca.copy();
    	    		var pastePecaEl = pastePeca.render();	
		            this.draggablePecas.push(pastePeca);				    
			        parent.appendChild(pastePecaEl);
			        //pastePecaEl.className = "selectedDragLi";
			        //this.selectedRegion.push(pastePecaEl);
			        addDrag(pastePecaEl);
			        //this.selectCell(pastePecaEl);
			    }
			    var headerStr = parent.id + "_header";
			    this.selectList($(headerStr));
			    this.enableDisableSelectOptions(false, false, false);     
	        }
        }           
		
	    setPageModified(true);
	},	
	
	addFromHK: function (index) {
	    if (!this.hotKeys[index]) return;
	   
        var addSlot = this.findAddSlot(this.hotKeys[index]);
		if (!addSlot) return;
		
	    var hkPeca = this.hotKeys[index].copy();
	    var hkPecaEl = hkPeca.render();
	    this.draggablePecas.push(hkPeca);		

		if (addSlot.match('div')) { // add to slotted drop cell
			addSlot.appendChild(hkPecaEl);
			this.validatePackage(hkPecaEl, addSlot);
		} else if (addSlot.match('ul')) {  // add to empty timeline list
			addSlot.appendChild(hkPecaEl);
		} else if (addSlot.match('li')) { // add to timeline list
            var parent = addSlot.parentNode;
		    if (addSlot.nextSiblings().length > 0) {
			    var next = addSlot.next();
			    parent.insertBefore(hkPecaEl, next);
		    } else {  // paste to end of list
			    parent.appendChild(hkPecaEl);
		    }
		}

		addDrag(hkPecaEl);
		this.selectCell(hkPecaEl);
		
		setPageModified(true);	    
	},
	
	// function to add item from icon
	addFromIcon: function () {		
		// get the element to add
		var dragEl = this.dragContainer.firstDescendant();
		if (!dragEl) return;
		
		var addSlot = this.findAddSlot(this.getPeca(dragEl));
		
		if (!addSlot) return;
				
		if (addSlot.match('div')) { // add to slotted drop cell
			addSlot.appendChild(dragEl);
			this.validatePackage(dragEl, addSlot);
		} else if (addSlot.match('ul')) {  // add to empty timeline list
			addSlot.appendChild(dragEl);
		} else if (addSlot.match('li')) { // add to timeline list
            var parent = addSlot.parentNode;
		    if (addSlot.nextSiblings().length > 0) {
			    var next = addSlot.next();
			    parent.insertBefore(dragEl, next);
		    } else {  // paste to end of list
			    parent.appendChild(dragEl);
		    }
		}
		
    	// look up peca for height property
		var activePeca = this.getPeca(dragEl);
		dragEl.style.height = (activePeca.height-2) + "px";
	    dragEl.style.width = activeEditor.cellWidth + "px";

		// reset selected cell to newly added cell
		this.selectCell(dragEl);
		
		// set page modified
		setPageModified(true);
	},	
	
	findAddSlot: function (peca) {
	    // first check if there's a selected cell
		if (this.selectedCell) {
		    if (this.selectedCell.match('div')) {  // slotted list
		        if (!this.selectedCell.firstDescendant()) { // return empty selected cell 
		            return this.selectedCell;
		        } else {
		            // find next opening in list
		            var nextSiblings = this.selectedCell.nextSiblings();
		            for (var i=0, len=nextSiblings.length; i<len; i++) {
		                if (!nextSiblings[i].firstDescendant()) return nextSiblings[i];
		            }
		            return null;
		        }
		    } else { // timeline list
		        if (this.systemLevel == 2) { // check to see if the selected cell is in the right channel
		            //var peca = this.getPeca(element);
		            var pecaChannel = parseInt(peca.channelsNN.split(',')[1],10);
		            var selectedList = this.selectedCell.parentNode;
		            var selectedListIndex = parseInt(selectedList.id.substr(selectedList.id.indexOf('ddList_') + 7),10);
		            if (pecaChannel == this.ddLists[selectedListIndex].listLookupId) {
		                return this.selectedCell;
		            }
		        } else { // simply return the selected cell
		            return this.selectedCell;
		        }
		    }
		}
		
		// if no selected cell then look for first open slot in editor
	
	    for (var i=0, len=this.ddLists.length; i<len; i++) {
            var list = $(this.ddLists[i].tagId);
            var listEl = list.firstDescendant();
            if (list.match('div')) { // slotted list
                if (!listEl) break;  // this list has no slots
                while (listEl && listEl.firstDescendant()) listEl = listEl.next();
            } else { // timeline list
                if (this.systemLevel == 2) { // again check for match with channel
                    //var peca = this.getPeca(element);
		            var pecaChannel = parseInt(peca.channelsNN.split(',')[1],10);
		            if (pecaChannel == this.ddLists[i].listLookupId) {
		                if (!listEl) return list;  // timeline list is empty
                        while (listEl.next()) listEl = listEl.next();
                    } else {
                        listEl = null;
                    }
                } else {
                    if (!listEl) return list;  // timeline list is empty
                    while (listEl.next()) listEl = listEl.next();
                }
            }
            if (listEl) return listEl;
        }
        return null;
	},
	
	// function to remove element from editor
	remove: function () {
		if (!this.selectedCell) return;
		var selected = this.selectedCell;
		var nextSelected = null;
		if (selected.match('div')) {
			if (selected.firstDescendant()) {
				selected = selected.firstDescendant();
			}
		} else {
		    if (selected.nextSiblings().length > 0) {
		        nextSelected = selected.next();
		    } else if (selected.previousSiblings().length > 0) {
		        nextSelected = selected.previous();
		    } 
		}
		removeDragObservers(selected);
		selected.remove();
		if (nextSelected) {
		    this.selectCell(nextSelected);
		} else {
		    this.selectedCell = null;
		}
		
		setPageModified(true);
	},
		
	// function to calculate where a draggable div should be dropped
	calculateDrop: function (e) {	
	    if (Event.element) {
    	    var eventEl = Event.element(e);
    	}
    	
    	//if (eventEl.parentNode == this.dragContainer) return;
    	
    	var dragOffset = Position.cumulativeOffset(eventEl);
	    
	   // $('mouseCoords').innerHTML = "(x,y): (" + dragOffset[0] + "," + dragOffset[1] + ")";
	    
	    var editorBodyOffset = Position.cumulativeOffset($(this.editorBodyId));
	    var dropPoint = [];
	    var width = this.cellWidth + (this.cellPadding*2) + this.spacerWidth;
	    var height = this.cellHeight + 1;   // +1 is for margin-top:-1px
	    
	    dropPoint[0] = Math.floor((dragOffset[0] - editorBodyOffset[0] - this.timeColWidth + Math.round(width/2))/width);
	    dropPoint[1] = Math.floor((dragOffset[1] - editorBodyOffset[1] + Math.round(height/2))/height);

	    //$('numDrags').innerHTML = "draggables: " + Draggables.drags.length;
	    //$('numDrops').innerHTML = "droppables: " + Droppables.drops.length;
	    
	    var peca = this.getPeca(eventEl);
	    this.activeDrop = null; 
	    //$('activeDrop').innerHTML = "active drop: ";
	    this.activeList = null;
	    //$('activeList').innerHTML = "active list: ";
	    this.activeSortable = null;
	    
	    if (peca.listType == 0) {
		    if (dropPoint[0] < 0) dropPoint[0] += 1;
		    if (dropPoint[1] < 0) dropPoint[1] += 1;
	    	
	        var dropsColIndex = parseInt(dropPoint[0] * this.numIntervals, 10);
	        var dropsRowIndex = parseInt(dropPoint[1], 10);
	        var dropsIndex = dropsColIndex + dropsRowIndex;
	        //$('dropsIndex').innerHTML = "drops index: " + dropsIndex;
	        //this.activeDrop = null;  // tbd: reset to null
	        
	        if ((dropsIndex >= 0) && (dropsIndex < Droppables.drops.length)) {  // tbd: more conditions necessary
                // if drop cell contains a drag element, just return
	        	if (Droppables.drops[dropsIndex].element.firstDescendant()) {
	        	    this.clearDropHighlight();
	        	    return;
	        	}

	        	this.activeDrop = Droppables.drops[dropsIndex];
	        	this.highlightDrop(this.activeDrop.element);
	        	//$('activeDrop').innerHTML = "active drop: " + this.activeDrop.element.id;
	        }
        } else {    
        // wgo !!! not finished	
	        if ( (dropPoint[0] >= 0) && (dropPoint[0] < this.numLists) && (dropPoint[1] > 0) ) {
	            if (this.ddLists[dropPoint[0]].listType == 1) {
	            	this.activeList = this.ddLists[dropPoint[0]];
	            	//$(this.activeList.tagId).appendChild(eventEl);
	            	//this.activeSortable = Sortable.options($(this.activeList.tagId));
	            	//$('activeList').innerHTML = "active list: " + this.activeSortable.element.id;
	            } else {
	            	return;
	            }
	            //$('activeList').innerHTML = "active list: " + this.activeList.element.id; //$(this.activeList.tagId).id;
	            //var listOffsetTop = editorBodyOffset[1];
	            //var listEls = $(this.activeList.tagId).immediateDescendants();
	            
	            
	            /*for(var i=0, len=listEls.length; i<len; i++) {
	                listOffsetTop += listEls[i].getHeight();
	                if (listHeight > dragMidPointY) {
	                    globalCurrentList = currentList;
	                    globalCurrentIndex = i;
	                    break;
	                }
	            }  */
	        } 
        }
	},
	
	// function to check for alerts on packages
	validatePackage: function (dragEl, dropEl) {
        if (this.systemLevel == 0) { // check package drops
            // remove any alerts if they exist
            var yellowAlerts = dragEl.getElementsByClassName('yellowAlert');
            for (var i=0, len=yellowAlerts.length; i<len; i++) {
                yellowAlerts[i].remove();
            }
            var redAlerts = dragEl.getElementsByClassName('redAlert');
            for (var i=0, len=redAlerts.length; i<len; i++) {
                redAlerts[i].remove();
            }
        
            // get list index and it's date
            var listIndex = parseInt(dropEl.id.substr(dropEl.id.indexOf('ddList_') + 7),10);
            var dropDateStr = this.listLookupIds[listIndex];
            var dateSplit = dropDateStr.split('/');
            var dateArr = [dateSplit[2], dateSplit[0], dateSplit[1]];
            dropDateStr = dateArr[0] + "-" + parseInt(dateArr[1],10).toPaddedString(2,10) + "-" + parseInt(dateArr[2],10).toPaddedString(2,10);
            // get drop's time 
            var selectedId = dropEl.id;
            var dropIndex = parseInt(selectedId.substr(selectedId.indexOf('drop_') + 5),10);
            var dropTimeStr = this.timeSlots[dropIndex];  // hh:mm
            var dropHour = dropTimeStr.split(':')[0];
            //var dropDateTimeStr = dropDateStr + "T" + dropTimeStr;

            
            // get peca's properties
            var peca = this.getPeca(dragEl);
            
            // start and end dates
            var dragStartDateStr = ""
            var dragEndDateStr = "";
            if (peca.startDateNN) {
                dragStartDateStr = peca.startDateNN[0] + "-" + parseInt(peca.startDateNN[1],10).toPaddedString(2,10) + "-" + parseInt(peca.startDateNN[2],10).toPaddedString(2,10);
            }
            if (peca.endDateNN) {
                dragEndDateStr = peca.endDateNN[0] + "-" + parseInt(peca.endDateNN[1],10).toPaddedString(2,10) + "-" + parseInt(peca.endDateNN[2],10).toPaddedString(2,10);
            }
            
            // day part restrictions
            var bitString = convertIntToBitString(peca.dayPartNN);
            var restrictedHours = [];
            for (var i=0; i<24; i++) {
                if (bitString[23-i] == '1') {
                    restrictedHours.push(i.toPaddedString(2,10));
                }
            }
            
            // check start and end dates and day part restrictions and show warning if necessary
            var yellowAlert = false;
            // start date
            if (peca.startDateNN)
                if (dropDateStr < dragStartDateStr) yellowAlert = true;
            // end date
            if (peca.endDateNN)
                if (dropDateStr > dragEndDateStr) yellowAlert = true;
            // day part
            for (var i=0, len=restrictedHours.length; i<len; i++) {
                if (dropHour == restrictedHours[i]) {
                    yellowAlert = true;
                    break;
                }
            }
            
            var yellowAlertDiv = null;
            if (yellowAlert) {
                // add yellow alert icon to package
                yellowAlertDiv = document.createElement('div');
                yellowAlertDiv.className = "yellowAlert";
                //var height = dragEl.getHeight();
                //yellowAlertDiv.style.height = height + "px";
                yellowAlertDiv.style.height = this.cellHeight + "px";
                yellowAlertDiv.setAttribute('onmousemove', 'event.cancelBubble=true;');
                dragEl.appendChild(yellowAlertDiv);
            }
            
            // check ingested, enabled, and onplayers
            var redAlert = false;
            if (peca.ingestedNN == '0') redAlert = true;
            if (peca.enabledNN == '0') redAlert = true;
            if (peca.onPlayersNN == '0') redAlert = true;

            if (redAlert) {
                // add red alert icon to package
                var redAlertDiv = document.createElement('div');
                redAlertDiv.className = "redAlert";
                //var height = dragEl.getHeight();
                //redAlertDiv.style.height = height + "px";
                redAlertDiv.style.height = this.cellHeight + "px";
                redAlertDiv.setAttribute('onmousemove', 'event.cancelBubble=true;');
                dragEl.appendChild(redAlertDiv);
                // move yellow alert if necessary
                if (yellowAlert) {
                    //var width = redAlertDiv.getWidth();
                    //yellowAlertDiv.style.right = width + "px";
                    yellowAlertDiv.style.right = "9px";
                }
            }
        }	
	},

    // function to validate if a drop is okay
    validateDrop: function (dragEl, dropEl) {
        if (dropEl.firstDescendant()) return false;
        
        if (this.systemLevel == 3) {  // dropping assets into a combo
            // get combo channel and duration
            var channelSelect = $('comboEditor_Channel');
            var comboChannel = "," + channelSelect.options[channelSelect.selectedIndex].value + ",";
            var comboDurationStr = padDurationStr($('comboEditor_Duration').value.strip());
            // get asset channel and duration
            var assetPeca = this.getPecaById(dragEl.id);
            var assetChannel = assetPeca.channelsNN.strip();
            var assetDuration = assetPeca.duration;
            var assetDurationStr = assetDuration[3] + ":" + assetDuration[4] + ":" + assetDuration[5];
            // check that channel and duration match
            if ( (!compareDurations(comboDurationStr, assetDurationStr)) || (comboChannel != assetChannel) ) {
                return false;
            }
        } else if (this.systemLevel == 0) {  // checking package for alerts
            this.validatePackage(dragEl, dropEl);
        }
                
        // if all conditions are met return true and continue with drop
        return true;
    },

	// function to check if drop is allowed
	mouseUp: function (e) {
		var eventEl = Event.element(e);
		if (eventEl.parentNode == this.dragContainer) {
			if (eventEl.match('li')) {
				var dimensions = this.dragContainer.getDimensions();
				eventEl.style.height = (dimensions.height-2) + "px";	
				eventEl.style.width = (dimensions.width-2) + "px";	
			} else {
				var dimensions = this.dragContainer.getDimensions();
				eventEl.style.height = (dimensions.height-2) + "px";	
				eventEl.style.width = (dimensions.width - (this.cellPadding*2) - 2) + "px";				
			}
		}
	},
	
	// function to clear highlighted cells
	clearDropHighlight: function () {
		var currentDrop = $(this.tagId).getElementsByClassName('dropHover');
		for (var i=0; i<currentDrop.length; i++) {           
	        currentDrop[i].removeClassName('dropHover');
		}
	},
	
	// function to highlight a drop cell
	highlightDrop: function (dropEl) {
		this.clearDropHighlight();
		dropEl.addClassName('dropHover');
	},
	
	// function to clear selected cells
	clearSelectedCells: function () {
	    // clear headers
	    var selectedHeaders = $(this.tagId).getElementsByClassName('selectedHeader');
	    for (var i=0, len=selectedHeaders.length; i<len; i++) {
	        selectedHeaders[i].className = "header";
	    }
	    
	    // clear selected times
	    var selectedTimes = $(this.tagId).getElementsByClassName('selectedTime');
	    for (var i=0, len=selectedTimes.length; i<len; i++) {
	        selectedTimes[i].className = "time";
	    }
	    
	    // clear slotted cells
		var currentSelectedDrops = $(this.tagId).getElementsByClassName('selectedDropCell');
		for (var i=0, len=currentSelectedDrops.length; i<len; i++) {         
	        currentSelectedDrops[i].className = "dropCell";
	        //var tmpHeight = parseInt(currentSelectedDrops[i].style.height.substr(0,currentSelectedDrops[i].style.height.length-2),10) + 3;
	        currentSelectedDrops[i].style.height = this.cellHeight + "px";
		}
		
		// clear slotted cells - multi
		var currentSelectedMultiDrops = $(this.tagId).getElementsByClassName('selectedDropCellMulti');
		for (var i=0, len=currentSelectedMultiDrops.length; i<len; i++) {         
	        currentSelectedMultiDrops[i].className = "dropCell";
	        //var tmpHeight = parseInt(currentSelectedDrops[i].style.height.substr(0,currentSelectedDrops[i].style.height.length-2),10) + 3;
	        //currentSelectedMultiDrops[i].style.height = this.cellHeight + "px";
		}
		
		// clear slotted cells - multi top
		var currentSelectedMultiTopDrops = $(this.tagId).getElementsByClassName('selectedDropCellMultiTop');
		for (var i=0, len=currentSelectedMultiTopDrops.length; i<len; i++) {         
	        currentSelectedMultiTopDrops[i].className = "dropCell";
	        //var tmpHeight = parseInt(currentSelectedDrops[i].style.height.substr(0,currentSelectedDrops[i].style.height.length-2),10) + 3;
	        //currentSelectedMultiTopDrops[i].style.height = this.cellHeight + "px";
		}
		
		// clear slotted cells - multi bottom
		var currentSelectedMultiBttmDrops = $(this.tagId).getElementsByClassName('selectedDropCellMultiBttm');
		for (var i=0, len=currentSelectedMultiBttmDrops.length; i<len; i++) {         
	        currentSelectedMultiBttmDrops[i].className = "dropCell";
	        //var tmpHeight = parseInt(currentSelectedDrops[i].style.height.substr(0,currentSelectedDrops[i].style.height.length-2),10) + 3;
	        //currentSelectedMultiBttmDrops[i].style.height = this.cellHeight + "px";
		}
		
		// if schedule few, re-adjust heights
		var currentDragCells = $(this.tagId).getElementsByClassName('dragCell');
		for (var i=0, len=currentDragCells.length; i<len; i++) {         
	        
	        //var tmpHeight = parseInt(currentDragCells[i].style.height.substr(0,currentDragCells[i].style.height.length-2),10) + 3;
	        currentDragCells[i].style.height = this.cellHeight + "px";
	        currentDragCells[i].style.lineHeight = this.cellHeight + "px";
		}
		
		// clear selected drags
		var currentSelectedLis = $(this.tagId).getElementsByClassName('selectedDragLi');
		for (var i=0, len=currentSelectedLis.length; i<len; i++) {         
	        currentSelectedLis[i].className = "dragLi";
	        var currHeightStr = currentSelectedLis[i].style.height;
	        var currHeight = currHeightStr.substr(0, currHeightStr.length-2);
	        var newHeight = parseInt(currHeight,10) + 4;
	        currentSelectedLis[i].style.height = newHeight + "px";
		}
		
	    // clear selected drags multi
		var currentSelectedLiMultis = $(this.tagId).getElementsByClassName('selectedDragLiMulti');
		for (var i=0, len=currentSelectedLiMultis.length; i<len; i++) {         
	        currentSelectedLiMultis[i].className = "dragLi";
		}
		
		// clear selected drags multi top
		var currentSelectedLiMultiTops = $(this.tagId).getElementsByClassName('selectedDragLiMultiTop');
		for (var i=0, len=currentSelectedLiMultiTops.length; i<len; i++) {         
	        currentSelectedLiMultiTops[i].className = "dragLi";
		}
		
		// clear selected drags multi bttm
		var currentSelectedLiMultiBttms = $(this.tagId).getElementsByClassName('selectedDragLiMultiBttm');
		for (var i=0, len=currentSelectedLiMultiBttms.length; i<len; i++) {         
	        currentSelectedLiMultiBttms[i].className = "dragLi";
		}
		
		// clear selected drag nexts
		var currentSelectedLiNexts = $(this.tagId).getElementsByClassName('selectedDragLiNext');
		for (var i=0, len=currentSelectedLiNexts.length; i<len; i++) {         
	        currentSelectedLiNexts[i].className = "dragLi";
		}
		
		// clear all the enabled buttons
		this.ddButtons.copyButton.disable();
		this.ddButtons.cutButton.disable();
		this.ddButtons.pasteButton.disable();
		this.ddButtons.addButton.disable();
		this.ddButtons.removeButton.disable();
		
		// clear menu options
		hideMenu();
        // get id names for menu ids
		var menuLevelBaseStr = "";
		if (this.systemLevel == 0) menuLevelBaseStr = "packageMenu";
		if (this.systemLevel == 1) menuLevelBaseStr = "eventMenu";
		if (this.systemLevel == 2) menuLevelBaseStr = "comboMenu";
		if (this.systemLevel == 3) menuLevelBaseStr = "assetMenu";
		
		// compose menu strings;
		var editEl = $(menuLevelBaseStr + 'Edit');
		var copyEl = $(menuLevelBaseStr + 'Copy');
		var cutEl = $(menuLevelBaseStr + 'Cut');
		var pasteEl = $(menuLevelBaseStr + 'Paste');
		var addEl = $(menuLevelBaseStr + 'Add');
		var removeEl = $(menuLevelBaseStr + 'Remove');
		var loopEl = $(menuLevelBaseStr + 'Loop');
		var duplicateAcrossEl = $(menuLevelBaseStr + 'DuplicateAcross');
		var changeColorEl = $(menuLevelBaseStr + 'ChangeColor');
		var viewAlertsEl = $(menuLevelBaseStr + 'ViewAlerts');	
		
	    if (editEl) editEl.style.display = "none";
	    if (copyEl) copyEl.style.display = "none";
	    if (cutEl) cutEl.style.display = "none";
	    if (pasteEl) pasteEl.style.display = "none";
	    if (addEl) addEl.style.display = "none";
	    if (removeEl) removeEl.style.display = "none";
	    if (loopEl) loopEl.style.display = "none";
	    if (duplicateAcrossEl) duplicateAcrossEl.style.display = "none";
	    if (changeColorEl) changeColorEl.style.display = "none";
	    if (viewAlertsEl) viewAlertsEl.style.display = "none";			
		
		this.selectedCell = null;
		this.selectedList = null;
		this.selectedRegion.clear();
	},
	
	// event handler to select a cell
	eventSelectCell: function (e) {
		var eventEl = Event.element(e);
		// check to see if the selected cell is in a selected region to avoid de-selecting during right-click
		if (e.button == 2 && this.selectedRegion.length > 0) {
		    var tmpEl = eventEl;
		    if (tmpEl.className == 'dragCell') tmpEl = tmpEl.parentNode;
		    for (var i=0, len=this.selectedRegion.length; i<len; i++) {
		        if (tmpEl == this.selectedRegion[i]) return;
		    }
		}		
		this.selectCell(eventEl);
	},
	
	// function to select a cell
	selectCell: function (element) {
		
		// check to see if element is the icon and update height if necessary  
		if (element.parentNode == this.dragContainer) {
			if (element.match('li')) {
				var peca = this.getPeca(element);
				element.style.width = activeEditor.cellWidth + "px";
				element.style.height = (peca.height-2) + "px";	
			} 
			return;
		}
        if (this.systemLevel < 3) {
		    if (!shiftDown) {  // perform single select
		        // clear any other selected cells
		        this.clearSelectedCells();
        		
        		var hasAlerts = false;
		        if (this.systemLevel == 0) {
        		    var yellowAlerts = element.getElementsByClassName('yellowAlert');
                    var redAlerts = element.getElementsByClassName('redAlert');
                    if ( (yellowAlerts.length > 0) || (redAlerts.length > 0) ) {
                        hasAlerts = true;
                    }
        		}
        		
		        var hasDrag = false;
		        var isSlotted = false;
		        if (element.match('div')) {  // slotted lists use div while timeline uses li
			        isSlotted = true;
			        // select parent if user is clicking on the alert div
			        if (element.className == 'redAlert' || element.className == 'yellowAlert') {
			            element = element.parentNode;
			        }
			        if (element.className == 'dragCell') {
				        this.updateIcon(element.id);
				        hasDrag = true;
				        element = element.parentNode;
			        }
			        // updates to select cell
			        // first select the single cell
			        element.className = "selectedDropCell";
                    
                    // then highlight the header and time slot too
                    var elName = element.id;
                    var listStrIndex = elName.search(/ddList/);
                    var headerName = elName.substr(0,listStrIndex+8) + "_header";
                    $(headerName).className = 'selectedHeader';

                    var elNameArr = elName.split('_');
                    var dropIndex = elNameArr[elNameArr.length-1];
                    var timeName = "editor_0_timeCol_" + dropIndex;
                    $(timeName).className = 'selectedTime';
                    
                    // change height
			        var selectedHeight = parseInt(this.cellHeight - 3, 10) + "px";
			        element.style.height = selectedHeight;
                    
			        if (element.firstDescendant()) {
			            this.updateIcon(element.firstDescendant().id);
			            
			            // adjust dragEl height and line-height temporarily
			            var selDrag = element.firstDescendant();
			            selDrag.style.height = selectedHeight;
			            selDrag.style.lineHeight = selectedHeight;
			            
			        } else {
			            // if space is empty and get info is open, update with "nothing selected"
			            if ($('getInfoPanel').style.display == "block") {
			                //this.updateGetInfo(this.dragContainer.firstDescendant().id);
                            $('getInfo_NothingSelected').style.display = "block";
                             $('getInfo_MultipleSelected').style.display = "none";
                            var infoEls = $('infoInner').immediateDescendants();
                            for (var i=0, len=infoEls.length; i<len; i++) {
                                infoEls[i].remove();
                            }
			            }
			        }
		        } else {
			        element.className = "selectedDragLi";
			        this.updateIcon(element.id);
			        
			        // change height for selected element
			        var peca = this.getPeca(element);
			        element.style.height = (peca.height-6) + "px"
			        				
				    // then highlight the header
                    var headerName = element.parentNode.id + "_header";
                    $(headerName).className = 'selectedHeader';
                    
                    // highlight time based on summation of durations of items in list
                    var listEls = element.parentNode.immediateDescendants();
                    var listIndex = listEls.indexOf(element);
                    
                    // get element height/time and sum heights
                    var elDurSecs = parseInt((peca.duration[3] * 3600),10) + parseInt((peca.duration[4] * 60),10) + parseInt((peca.duration[5]),10);
                    
                    var totalSecs = 0;
                    for (var i=0, len=listIndex; i<len; i++) {
                        var tmpPeca = this.getPeca(listEls[i]);
                        var durationInSecs = parseInt((tmpPeca.duration[3] * 3600),10) + parseInt((tmpPeca.duration[4] * 60),10) + parseInt((tmpPeca.duration[5]),10);
                        totalSecs += durationInSecs;
                    }
                    
                    var timeStartIndex = (totalSecs / this.interval);
                    var timeEndIndex = timeStartIndex + (elDurSecs / this.interval);
                    
                    for (var i=timeStartIndex; i<timeEndIndex; i++) {
                        var timeName = this.tagId + "_timeCol_" + i;
                        $(timeName).className = 'selectedTime';
                    }
                    
                    // also adjust properties of next element if any
                    if (element.next()) {
                        var nextEl = element.next();
                        nextEl.className = "selectedDragLiNext";
                    }

		        }
		        this.selectedCell = element;

		        // enable buttons and menu options that are active when a cell is selected
		        this.enableDisableSelectOptions(isSlotted, hasDrag, hasAlerts);
		    } else { // perform multiple select (shift key is down)
		        //if (this.systemLevel != 0) return;
		        if (this.selectedList) return;
		        if (!this.selectedCell) return;
		        var firstSelected = this.selectedCell;
		        this.clearSelectedCells();
		        var secondSelected = element;
		        if (firstSelected.match('div')) {
		            if (secondSelected.className == 'dragCell') secondSelected = secondSelected.parentNode;
		        }
    		    
		        // verify both selections are in same list
//		        var firstSelectedListId = firstSelected.id.substring(0,firstSelected.id.indexOf('_drop'));
//		        var secondSelectedListId = secondSelected.id.substring(0,secondSelected.id.indexOf('_drop'));
                var firstSelectedListId = firstSelected.parentNode.id;
		        var secondSelectedListId = secondSelected.parentNode.id;
		        if (firstSelectedListId != secondSelectedListId) return;
    		    
		        // otherwise highlight all drop cells in between and add to selected region
		        var listEls = $(firstSelectedListId).immediateDescendants();
		        // loop through list until first or second selected appears, then highlight until the other appears
		        if (firstSelected.match('div')) { // slotted list
	                var firstSelectedIndex = parseInt(firstSelected.id.substr(firstSelected.id.indexOf('drop_')+5),10);
	                var secondSelectedIndex = parseInt(secondSelected.id.substr(secondSelected.id.indexOf('drop_')+5),10);
	                var startIndex = (firstSelectedIndex <= secondSelectedIndex) ? firstSelectedIndex : secondSelectedIndex;
	                var endIndex = (startIndex == firstSelectedIndex) ? secondSelectedIndex : firstSelectedIndex;     
                    var dropCellIdBase = firstSelected.id.substring(0, firstSelected.id.indexOf('drop_')+5);
                    // highlight cells and time slots
                    for (var i=startIndex; i<=endIndex; i++) {
                        var dropCellId = dropCellIdBase + i;
                        $(dropCellId).className = "selectedDropCellMulti";
                        this.selectedRegion.push($(dropCellId));
                        // times
                        var timeName = "editor_0_timeCol_" + i;
                        $(timeName).className = 'selectedTime';
                    }  
                    // highlight list header
                    $(firstSelectedListId+'_header').className = "selectedHeader";
                    // make special adjustments to first and last cells
                    var topCellId = dropCellIdBase + startIndex;
                    var bttmCellId = dropCellIdBase + endIndex;
                    var topCell = $(topCellId);
                    var bttmCell = $(bttmCellId);
                    topCell.className = "selectedDropCellMultiTop";
                    bttmCell.className = "selectedDropCellMultiBttm";
                } else { // timeline list
                    var highlight = false;
                    for (var i=0, len=listEls.length; i<len; i++) {
                        if (highlight) {
                            listEls[i].className = "selectedDragLiMulti";
                            this.selectedRegion.push(listEls[i]);
                        }
                        if ((listEls[i] == firstSelected || listEls[i] == secondSelected)
                                && highlight == false) {
                            highlight = true;
                            listEls[i].className = "selectedDragLiMulti";
                            this.selectedRegion.push(listEls[i]);
                        } else if ((listEls[i] == firstSelected || listEls[i] == secondSelected)
                                && highlight == true) {
                            highlight = false;
                        }
                    }
                    // adjust top and bottom of selected region
                    var firstSelIndex = listEls.indexOf(firstSelected);
                    var secondSelIndex = listEls.indexOf(secondSelected);
                    var startIndex = (firstSelIndex < secondSelIndex) ? firstSelIndex : secondSelIndex;
                    var endIndex = (firstSelIndex > secondSelIndex) ? firstSelIndex : secondSelIndex;
                    listEls[startIndex].className = "selectedDragLiMultiTop";
                    listEls[endIndex].className = "selectedDragLiMultiBttm";
                    
                    // highlight header and time
                    var headerName = firstSelectedListId + "_header";
                    $(headerName).className = "selectedHeader";
                    
                    var startSecs = 0;
                    for (var i=0, len=startIndex; i<len; i++) {
                        var tmpPeca = this.getPeca(listEls[i]);
                        var durationInSecs = parseInt((tmpPeca.duration[3] * 3600),10) + parseInt((tmpPeca.duration[4] * 60),10) + parseInt((tmpPeca.duration[5]),10);
                        startSecs += durationInSecs;
                    }
                    
                    var endSecs = 0;
                    for (var i=0, len=endIndex+1; i<len; i++) {
                        var tmpPeca = this.getPeca(listEls[i]);
                        var durationInSecs = parseInt((tmpPeca.duration[3] * 3600),10) + parseInt((tmpPeca.duration[4] * 60),10) + parseInt((tmpPeca.duration[5]),10);
                        endSecs += durationInSecs;
                    }
                    
                    var timeStartIndex = (startSecs / this.interval);
                    var timeEndIndex = (endSecs / this.interval);
                    
                    for (var i=timeStartIndex; i<timeEndIndex; i++) {
                        var timeName = this.tagId + "_timeCol_" + i;
                        $(timeName).className = 'selectedTime';
                    }
                    
                    // also adjust properties of next element if any
                    if (listEls[endIndex].next()) {
                        var nextEl = listEls[endIndex].next();
                        nextEl.className = "selectedDragLiNext";
                    }
                    
                }
                this.enableDisableSelectOptions(false, false, false);
                // if region selected show multiple selected
	            if ( ($('getInfoPanel').style.display == "block") && (this.selectedRegion.length > 1) ) {
	                // hide "Nothing selected"
		            $('getInfo_NothingSelected').style.display = "none";
        		    
		            var container = $('infoInner');
		            // delete any previous contents
		            var currentEls = container.immediateDescendants();
		            for (var i=0, len=currentEls.length; i<len; i++) {
		                currentEls[i].remove();
		            }
        		    
		            // show multiple selected
		            $('getInfo_MultipleSelected').style.display = "block";
	            }
	        }
	    } else {
	        this.selectedCell = element;
	        this.updateIcon(element.id);
	    }
	},
	
	enableDisableSelectOptions: function (isSlotted, hasDrag, hasAlerts) {
		// handle multi-select case
		if ( (this.selectedRegion.length > 0) || (this.selectedList) ) {
		    this.ddButtons.copyButton.enable();
			this.ddButtons.cutButton.enable();
			this.ddButtons.pasteButton.enable();
			this.ddButtons.addButton.disable();
			this.ddButtons.removeButton.disable();
			return;
		}
		
		// get id names for menu ids
		var menuLevelBaseStr = "";
		if (this.systemLevel == 0) menuLevelBaseStr = "packageMenu";
		if (this.systemLevel == 1) menuLevelBaseStr = "eventMenu";
		if (this.systemLevel == 2) menuLevelBaseStr = "comboMenu";
		if (this.systemLevel == 3) menuLevelBaseStr = "assetMenu";
		
		// compose menu strings;
		
		var editEl = $(menuLevelBaseStr + 'Edit');
		var copyEl = $(menuLevelBaseStr + 'Copy');
		var cutEl = $(menuLevelBaseStr + 'Cut');
		var pasteEl = $(menuLevelBaseStr + 'Paste');
		var addEl = $(menuLevelBaseStr + 'Add');
		var removeEl = $(menuLevelBaseStr + 'Remove');
		var hotKeyEl = $(menuLevelBaseStr + 'HotKeys');
		var loopEl = $(menuLevelBaseStr + 'Loop');
		var duplicateAcrossEl = $(menuLevelBaseStr + 'DuplicateAcross');
		var changeColorEl = $(menuLevelBaseStr + 'ChangeColor');
		var viewAlertsEl = $(menuLevelBaseStr + 'ViewAlerts');

		if (isSlotted) {
		    // options for slotted list elements
			if (hasDrag) {
			    // button options for selected drag element
				this.ddButtons.copyButton.enable();
				this.ddButtons.cutButton.enable();
				this.ddButtons.pasteButton.disable();
				this.ddButtons.addButton.enable();
				this.ddButtons.removeButton.enable();
				
				// menu options for selected drag element
				if (editEl) editEl.style.display = "block";
				if (copyEl) copyEl.style.display = "block";
				if (cutEl) cutEl.style.display = "block";
				if (pasteEl) pasteEl.style.display = "none";
				if (addEl) addEl.style.display = "block";
				if (removeEl) removeEl.style.display = "block";
				if (hotKeyEl) hotKeyEl.style.display = "block";
				if (loopEl) loopEl.style.display = "block";
				if (duplicateAcrossEl) duplicateAcrossEl.style.display = "block";
				if (changeColorEl) changeColorEl.style.display = "block";
				if (hasAlerts && viewAlertsEl) viewAlertsEl.style.display = "block";
			} else {
			    // button options for selected empty drop box
				this.ddButtons.copyButton.disable();
				this.ddButtons.cutButton.disable();
				if (this.clipboard.length > 0) this.ddButtons.pasteButton.enable();
				if (this.dragContainer.firstDescendant()) this.ddButtons.addButton.enable();
				this.ddButtons.removeButton.disable();
				
				 // menu options for selected empty drop box
				if (editEl) editEl.style.display = "none";
				if (copyEl) copyEl.style.display = "none";
				if (cutEl) cutEl.style.display = "none";
				if (this.clipboard.length > 0)
				    if (pasteEl) pasteEl.style.display = "block";
				if (this.dragContainer.firstDescendant())
				    if (addEl) addEl.style.display = "block";
				if (removeEl) removeEl.style.display = "none";
				if (hotKeyEl) hotKeyEl.style.display = "none";
				if (loopEl) loopEl.style.display = "none";
				if (duplicateAcrossEl) duplicateAcrossEl.style.display = "none";
				if (changeColorEl) changeColorEl.style.display = "none";				 
			}
		} else {
		    // options for timeline list elements
		    
		    // button options
			this.ddButtons.copyButton.enable();
			this.ddButtons.cutButton.enable();
			if (this.clipboard.length > 0) this.ddButtons.pasteButton.enable();
			if (this.dragContainer.firstDescendant()) this.ddButtons.addButton.enable();
			this.ddButtons.removeButton.enable();
			
			// menu options
			if (editEl) editEl.style.display = "block";
			if (copyEl) copyEl.style.display = "block";
			if (cutEl) cutEl.style.display = "block";
			if (this.clipboard.length > 0)
			    if (pasteEl) pasteEl.style.display = "block";
			if (this.dragContainer.firstDescendant())
			    if (addEl) addEl.style.display = "block";
			if (removeEl) removeEl.style.display = "block";
			if (hotKeyEl) hotKeyEl.style.display = "block";
			if (loopEl) loopEl.style.display = "block";
			if (duplicateAcrossEl) duplicateAcrossEl.style.display = "none";
			if (changeColorEl) changeColorEl.style.display = "block";				
		}
		
	},
	
	showMenu: function (e) { 
		var eventEl = Event.element(e);
		// don't show menu if clicking on drag container or empty cell with no clipboard or dragcontainer items
		if (eventEl.parentNode == this.dragContainer) return;
		if ((eventEl.className == 'selectedDropCell') 
		        && (this.dragContainer.firstDescendant() == null)
		        && (this.clipboard.length < 1)) return;
        
        // adjust element if user clicks on an alert
        if (eventEl.className == 'redAlert' || eventEl.className == 'yellowAlert') {
		    eventEl = eventEl.parentNode;
		}

    	// get offset
    	xOffset = Event.pointerX(e);
    	yOffset = Event.pointerY(e);
    	
    	var menuEl;
    	if (this.selectedRegion.length > 0) {  // show menu for multi select
    	    menuEl = $('multiSelectMenu');
//    	    menuEl.style.left = xOffset + "px";
//          menuEl.style.top = yOffset + "px";
            var windowHeight = window.innerHeight;
            var windowWidth = window.innerWidth;
            var scrollOffset = Position.realOffset($('pageContainer'));
            var menuHeight = menuEl.getHeight();
            var menuWidth = menuEl.getWidth();
            
            // based on window size show menu to left or right
            if ( (xOffset + menuWidth - scrollOffset[0]) > windowWidth ) {
                menuEl.style.left = (xOffset - menuWidth) + "px";
            } else {
                menuEl.style.left = xOffset + "px";
            }
            // based on window size show menu down or up
            if ( (yOffset + menuHeight - scrollOffset[1]) > windowHeight ) {
                menuEl.style.top = (yOffset - menuHeight) + "px";
            } else {
                menuEl.style.top = yOffset + "px";
            }
            menuEl.style.display = "block";
            return false;
        }
    	   	
        var peca = this.getPeca(eventEl)
        
        // set drill parameters
        if (this.systemLevel == 0) {  // drill down to package
            menuEl = $('packageMenu');
        } else if (this.systemLevel == 1) { // drill down to event              
            menuEl = $('eventMenu');
        } else if (this.systemLevel == 2) { // drill down to asset or combo    
            if (peca.isCombo == 1) {
                menuEl = $('comboMenu');
            } else {   
                menuEl = $('assetMenu');                 
            }
        } else if (this.systemLevel == 3) {
            //this.selectedCell = eventEl;
            menuEl = $('assetMenuShort');
        }
        
        if (menuEl) {
            var windowHeight = window.innerHeight;
            var windowWidth = window.innerWidth;
            var scrollOffset = Position.realOffset($('pageContainer'));
            var menuHeight = menuEl.getHeight();
            var menuWidth = menuEl.getWidth();
            
            // based on window size show menu to left or right
            if ( (xOffset + menuWidth - scrollOffset[0]) > windowWidth ) {
                menuEl.style.left = (xOffset - menuWidth) + "px";
            } else {
                menuEl.style.left = xOffset + "px";
            }
            // based on window size show menu down or up
            if ( (yOffset + menuHeight - scrollOffset[1]) > windowHeight ) {
                menuEl.style.top = (yOffset - menuHeight) + "px";
            } else {
                menuEl.style.top = yOffset + "px";
            }
            
            menuEl.style.display = "block";
        }
            
        // return false to disable windows context menu
        return false;
	},
	
	showHKMenu: function () {
	    var hotKeyMenu = $('hotKeyMenu');
	    var menuOption = null;
	    var menuEl = null;
	    if (this.systemLevel == 0) {
	        menuOption = $('packageMenuHotKeys');
	        menuEl = $('packageMenu');
	    } else if (this.systemLevel == 1) {
	        menuOption = $('eventMenuHotKeys');
	        menuEl = $('eventMenu');
	    } else if (this.systemLevel == 2) {
	        if (!this.selectedCell) return;
	        var selected = this.selectedCell;
	        if (selected.match('div')) {
	            selected = selected.firstDescendant();
	        }
	        var peca = this.getPeca(selected);
	        if (peca.isCombo == 1) {
	            menuOption = $('comboMenuHotKeys');
	            menuEl = $('comboMenu');
	        } else {
	            menuOption = $('assetMenuHotKeys');
	            menuEl = $('assetMenu');      
	        }
	    }
	    var menuHeight = menuEl.getHeight();
	    var menuWidth = menuEl.getWidth();
	    var hkMenuHeight = hotKeyMenu.getHeight();
	    var hkMenuWidth = hotKeyMenu.getWidth();
        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;
        var offset = Position.cumulativeOffset(menuOption);
        var scrollOffset = Position.realOffset($('pageContainer'));
        
        // based on window size show menu to left or right
        if ( (offset[0] + menuWidth + hkMenuWidth - 20 - scrollOffset[0]) > windowWidth ) {
            hotKeyMenu.style.left = (offset[0] - hkMenuWidth + 10) + "px";
        } else {
            hotKeyMenu.style.left = (offset[0] + menuWidth - 20) + "px";
        }
        // based on window size show menu down or up
        if ( (offset[1] + hkMenuHeight - scrollOffset[1]) > windowHeight ) {
            hotKeyMenu.style.top = (offset[1] - hkMenuHeight + 20) + "px";
        } else {
            hotKeyMenu.style.top = offset[1] + "px";
        }	
        hotKeyMenu.style.display = "block";    
	},
	
	hideHKMenu: function () {
	    var hotKeyMenu = $('hotKeyMenu');
        hotKeyMenu.style.display = "none";
	},	
	
	assignHotKey: function (slot) {
	    // assign to array of hot keys
	    if (!this.selectedCell) return;
	    var selected = this.selectedCell;
		if (selected.match('div')) {
			selected = selected.firstDescendant();
		}    
		if (!selected) return;
	    var peca = this.getPeca(selected);
	    this.hotKeys[slot] = peca;
	    
	    // show selected item in hot key palette
	    var hkSlot = "";
        if (this.systemLevel == 0) {
            hkSlot = "package_HK" + slot;
	    } else if (this.systemLevel == 1) {
            hkSlot = "event_HK" + slot;
	    } else if (this.systemLevel == 2) {
	        hkSlot = "combo_HK" + slot;
	    }	
	    $(hkSlot).innerHTML = peca.name;
        $(hkSlot).style.backgroundColor = peca.thisColor;
        $(hkSlot).style.color = peca.fontColor;    
	},
	
	eventSelectList: function (e) {
		var eventEl = Event.element(e);
	    if (!eventEl) return;
	    this.selectList(eventEl);
	},
	
	// function to select entire list at once
	selectList: function (eventEl) {
	    
	    //if (!this.systemLevel == 0) return;
	
	    // first clear any other selected headers
        this.clearSelectedCells();

        // highlight the header
	    if (eventEl.className == 'header') eventEl.className = 'selectedHeader';
	    
	    // get the header's corresponding list
	    var listId = eventEl.id.substring(0,eventEl.id.indexOf('_header'));
	    this.selectedList = $(listId);
	    
	    // highlight the list elements
	    var listEls = this.selectedList.immediateDescendants();
	    if (this.selectedList.match('div')) {  // highlight dropcells in list
	        for (var i=0, len=listEls.length; i<len; i++) {
	            listEls[i].className = "selectedDropCellMulti"
	        }
	    } else { // highlight drag lis
	        for (var i=0, len=listEls.length; i<len; i++) {
	            listEls[i].className = "selectedDragLiMulti"
	        }
	    }
	    this.enableDisableSelectOptions(false, false, false);
	},
	
	showListMenu: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    
	    // select list
	    this.selectList(eventEl);
	    
	    // get offset
    	xOffset = Event.pointerX(e);
    	yOffset = Event.pointerY(e);
    	   	
        var menuEl = (this.systemLevel == 0) ? $('scheduleMenu') : $('packageListMenu');
	    
	    if (menuEl){
//            menuEl.style.left = xOffset + "px";
//            menuEl.style.top = yOffset + "px";
            var windowHeight = window.innerHeight;
            var windowWidth = window.innerWidth;
            var scrollOffset = Position.realOffset($('pageContainer'));
            var menuHeight = menuEl.getHeight();
            var menuWidth = menuEl.getWidth();
            
            // based on window size show menu to left or right
            if ( (xOffset + menuWidth - scrollOffset[0]) > windowWidth ) {
                menuEl.style.left = (xOffset - menuWidth) + "px";
            } else {
                menuEl.style.left = xOffset + "px";
            }
            // based on window size show menu down or up
            if ( (yOffset + menuHeight - scrollOffset[1]) > windowHeight ) {
                menuEl.style.top = (yOffset - menuHeight) + "px";
            } else {
                menuEl.style.top = yOffset + "px";
            }
            menuEl.style.display = "block";
        }
            
        // return false to disable windows context menu
        return false;
	    
	},
	
	drillDown: function (e) {
	    var eventEl = Event.element(e);
	    
	    if (eventEl.parentNode == this.dragContainer) {
	        this.addFromIcon();
	        return;
	    }
	    
        if (this.systemLevel == 0) {  // drill down to package
            drillDown(1);
        } else if (this.systemLevel == 1) { // drill down to event 
            drillDown(2);              
        } else if (this.systemLevel == 2) { // drill down to asset or combo   
            var peca = this.getPeca(eventEl);
            if (peca.isCombo == 1) {
                drillDown(3);
            } else {
                drillDown(4);               
            }
        } else if (this.systemLevel == 3) { // drill down to asset
            drillDown(4);
        }       
	},
	
	addNewCueStringRow: function () {
	    var cueString = new CueString();
	    cueString.load('','');
	    
	     // add to editors list of cues
	    this.cues.push(cueString);
	    
	    // render cuestring
	    var cueStringRow = cueString.render();
	    
	    // get container
	    var container = (this.systemLevel == 1) ? $('packageEditorCues') : $('eventEditorCues');
	    container.appendChild(cueStringRow);
	    if (container.immediateDescendants().length == 2) {
	        var minusBtn = cueStringRow.getElementsBySelector('input[type="button"]')[1];
	        minusBtn.setAttribute('disabled', 'disabled');
	    } else {
            var minusBtn = container.getElementsBySelector('input[type="button"]')[1];
	        minusBtn.removeAttribute('disabled');
        }
	},
	
	removeCueStringRow: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    
	    // get container and return if this is the last cue
	    var container = (this.systemLevel == 1) ? $('packageEditorCues') : $('eventEditorCues');
	    //var container = eventEl.parentNode.parentNode.parentNode;
	    if (container.immediateDescendants().length == 2) { 
	        return;
	    }
	    
	    // get cue string row and object
	    var cueStringRow = eventEl.parentNode.parentNode;

	    var cueStringIndex = cueStringRow.id.substr(parseInt(cueStringRow.id.indexOf('cue_')+4),10);
	    // set to deleted 
	    this.cues[cueStringIndex].deleted = true;
	    
	    // remove row
	    cueStringRow.remove();
	    
	    if (container.immediateDescendants().length == 2) {
	        var minusBtn = container.getElementsBySelector('input[type="button"]')[1];
	        minusBtn.setAttribute('disabled', 'disabled');
	    }
	},
	
	updateCueInEditor: function (e) {
	    var eventEl = Event.element(e);
	    
	    /*var cueEl = document.createElement('div');
	    cueEl.className = "cue";
	    cueEl.style.width = this.spacerWidth + "px";
	    
	    var time = eventEl.options[eventEl.selectedIndex].value.split(":");
	    var seconds = time[0] * 60 + time[1];
	    var offsetY = seconds * this.pixelsToSecs;
	    
	    cueEl.style.marginTop = (offsetY-3) + "px";
	    
        var containerId = this.tagId + "_margin_0";
        $(containerId).appendChild(cueEl);*/
	    
	    //alert(eventEl.options[eventEl.selectedIndex].value);
	    
	    // if no time is selected, then no update
	},
	
	showPrintPage: function () {
	    var win = null;
	    var htmlHeader = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
        htmlHeader += '<html xmlns="http://www.w3.org/1999/xhtml" >';
        htmlHeader += '<head>';
        htmlHeader += '<title></title>';
        htmlHeader += '<script src="Scripts/prototype.js" type="text/javascript"></script>'
        htmlHeader += '<link href="StyleSheet.css" rel="stylesheet" type="text/css" />';
        htmlHeader += '</head>';
        htmlHeader += '<body>';
        
        // open window and start writing
        win = window.open('','printWindow', 'scrollbars=1, resizable=1, width=1305, height=800');
        //win = window.open('PrintTemplate.htm','Print', 'scrollbars=1, resizable=1, width=1305, height=800');
        win.document.write(htmlHeader);
        
    	// create outer container
        var outerContainer = document.createElement('div');
        
        // create container
        var container = document.createElement('div');
        container.style.margin = "5px 0 0 5px";
        
        // create img header
        var img = document.createElement('img');
        img.setAttribute('src', 'Images/nav-splash.gif');
        img.setAttribute('alt', 'ABC SuperSign');
        container.appendChild(img);

        // create header
        var h1 = document.createElement('h1');
        h1.style.width = "1280px";
        var span = document.createElement('span');
        //span.innerHTML = scheduleEditorHeader.innerHTML;
        h1.appendChild(span);
        var closeBtn = document.createElement('input');
        closeBtn.setAttribute('type', 'button');
        closeBtn.setAttribute('value', 'Close');
        closeBtn.setAttribute('onclick', 'window.close();');
        closeBtn.style.float = "right";
        var printBtn = document.createElement('input');
        printBtn.setAttribute('type', 'button');
        printBtn.setAttribute('value', 'Print');
        printBtn.setAttribute('onclick', 'window.print();');
        printBtn.style.float = "right";
        h1.appendChild(closeBtn);
        h1.appendChild(printBtn);
        container.appendChild(h1);
        
        
        var br1 = document.createElement('br');
        container.appendChild(br1);
        
	    if (this.systemLevel == 0) {	        
            span.innerHTML = scheduleEditorHeader.innerHTML;
            // create schedule title header
            var titleRow = document.createElement('div');
            titleRow.className = "editorTitleBarPrint";
            titleRow.id = "headerRow";
            // create time column
            var col = document.createElement('div');
            col.className = "printTimeCol";
            col.style.borderBottom = "none";
            col.innerHTML = "TIME";
            col.id = "headerTimeCol";
            var spacerXL = document.createElement('div');
            spacerXL.className = "spacerXL";
            spacerXL.style.height = "2px";
            titleRow.appendChild(col);
            titleRow.appendChild(spacerXL);
            for (var i=0, len=this.headerText.length; i<len; i++) {
                var col = document.createElement('div');
                col.className = "printCol";
                col.innerHTML = this.headerText[i];
                col.style.borderBottom = "none";
                var spacerXL = document.createElement('div');
                spacerXL.className = "spacerXL";
                spacerXL.style.height = "2px";
                titleRow.appendChild(col);
                titleRow.appendChild(spacerXL);
            }
            container.appendChild(titleRow);
            
            // create editor body
            var editorBody = document.createElement('div');
            // create editor rows/cols and append
            for (var i=0, len=this.timeStrs.length; i<len; i++) {
                var row = document.createElement('div');
                row.className = "printRow";
                // create time column
                var col = document.createElement('div');
                col.className = "printTimeCol";
                col.innerHTML = this.timeStrs[i];
                var spacerXL = document.createElement('div');
                spacerXL.className = "spacerXL";
                spacerXL.style.height = "2px";
                row.appendChild(col);
                row.appendChild(spacerXL);
                for (var j=0, jlen=this.ddLists.length; j<jlen; j++) {
                    var col = document.createElement('div');
                    col.className = "printCol";
                    var dragEl = $(this.ddLists[j].tagId).immediateDescendants()[i].firstDescendant();
                    if (dragEl) {
                        col.innerHTML = dragEl.firstChild.text
                    } else {
                        col.innerHTML = "&nbsp;";
                    }
                    
                    var spacerXL = document.createElement('div');
                    spacerXL.className = "spacerXL";
                    spacerXL.style.height = "2px";
                    row.appendChild(col);
                    row.appendChild(spacerXL);
                }
                editorBody.appendChild(row);           
            }
                     
        } else if (this.systemLevel == 1) {
            if (activeEditorPageId != 'liveControl') { 
                span.innerHTML = "Package: " + $('packageEditor_Name').value;

                // create properties header
    //            var properties = document.createElement('h3');
    //            properties.innerHTML = "Properties";
    //            properties.style.paddingLeft = "5px";
    //            properties.style.width = "1280px";
    //            container.appendChild(properties);
                
                // add properties
                var emptyHeight = "14px"; 
                
                var propertyRow1 = document.createElement('div');
                propertyRow1.className = ("row");
                
                var propertyCol1 = document.createElement('div');
                propertyCol1.className = ("col widthM"); 
                var propertyLabel1 = document.createElement('label');
                propertyLabel1.className = "printLabel"
                propertyLabel1.innerHTML = "Package Name";
                var propertyLabel1Value = document.createElement('div');
                propertyLabel1Value.className = "printValue widthM"
                propertyLabel1Value.innerHTML = $('packageEditor_Name').value;
                if ($('packageEditor_Name').value == '') propertyLabel1Value.style.height = emptyHeight;
                propertyCol1.appendChild(propertyLabel1);
                propertyCol1.appendChild(propertyLabel1Value);
                
                var propertySpacer1 = document.createElement('div');
                propertySpacer1.className = ("spacerXL"); 
                
                var propertyCol2 = document.createElement('div');
                propertyCol2.className = ("col widthM"); 
                var propertyLabel2 = document.createElement('label');
                propertyLabel2.className = "printLabel"
                propertyLabel2.innerHTML = "Duration";
                var propertyLabel2Value = document.createElement('div');
                propertyLabel2Value.className = "printValue widthM"
                propertyLabel2Value.innerHTML = $('packageEditor_Duration').value;
                if ($('packageEditor_Duration').value == '') propertyLabel2Value.style.height = emptyHeight;
                propertyCol2.appendChild(propertyLabel2);
                propertyCol2.appendChild(propertyLabel2Value);
                            
                var propertySpacer2 = document.createElement('div');
                propertySpacer2.className = ("spacerXL");
                
                var propertyCol3 = document.createElement('div');
                propertyCol3.className = ("col widthM"); 
                var propertyLabel3 = document.createElement('label');
                propertyLabel3.innerHTML = "Air Date Start";
                propertyLabel3.className = "printLabel"
                var propertyLabel3Value = document.createElement('div');
                propertyLabel3Value.className = "printValue widthM"
                propertyLabel3Value.innerHTML = $('packageEditor_AirDateFrom').value;
                if ($('packageEditor_AirDateFrom').value == '') propertyLabel3Value.style.height = emptyHeight;
                propertyCol3.appendChild(propertyLabel3);
                propertyCol3.appendChild(propertyLabel3Value);
                
                var propertySpacer3 = document.createElement('div');
                propertySpacer3.className = ("spacerXL"); 
                
                var propertyCol4 = document.createElement('div');
                propertyCol4.className = ("col widthM"); 
                var propertyLabel4 = document.createElement('label');
                propertyLabel4.innerHTML = "Air Date End";
                propertyLabel4.className = "printLabel"
                var propertyLabel4Value = document.createElement('div');
                propertyLabel4Value.className = "printValue widthM"
                propertyLabel4Value.innerHTML = $('packageEditor_AirDateTo').value;
                if ($('packageEditor_AirDateTo').value == '') propertyLabel4Value.style.height = emptyHeight;
                propertyCol4.appendChild(propertyLabel4);
                propertyCol4.appendChild(propertyLabel4Value);
                            
                var propertySpacer4 = document.createElement('div');
                propertySpacer4.className = ("spacerXL"); 
                
                var propertyCol5 = document.createElement('div');
                propertyCol5.className = ("col widthM"); 
                var propertyLabel5 = document.createElement('label');
                propertyLabel5.innerHTML = "Color";
                propertyLabel5.className = "printLabel"
                var propertyLabel5Value = document.createElement('div');
                propertyLabel5Value.className = "colorSelectBox";
                propertyLabel5Value.style.backgroundColor = $('packageEditor_Color').style.backgroundColor
                propertyCol5.appendChild(propertyLabel5);
                propertyCol5.appendChild(propertyLabel5Value);
                
                propertyRow1.appendChild(propertyCol1);
                propertyRow1.appendChild(propertySpacer1);
                propertyRow1.appendChild(propertyCol2);
                propertyRow1.appendChild(propertySpacer2);
                propertyRow1.appendChild(propertyCol3);
                propertyRow1.appendChild(propertySpacer3);
                propertyRow1.appendChild(propertyCol4);
                propertyRow1.appendChild(propertySpacer4);
                propertyRow1.appendChild(propertyCol5);
                
                var propertyBR1 = document.createElement('br');
                
                var propertyRow2 = document.createElement('div');
                propertyRow2.className = ("row");
                
                var propertyCol6 = document.createElement('div');
                propertyCol6.className = ("col widthL"); 
                var propertyLabel6 = document.createElement('label');
                propertyLabel6.className = "printLabel"
                propertyLabel6.innerHTML = "Cue String Start";
                var propertyLabel6Value = document.createElement('div');
                propertyLabel6Value.innerHTML = $('packageEditor_CueStringStart').value;
                propertyLabel6Value.className = "printValue widthL"
                if ($('packageEditor_CueStringStart').value == '') propertyLabel6Value.style.height = emptyHeight;
                propertyCol6.appendChild(propertyLabel6);
                propertyCol6.appendChild(propertyLabel6Value);
                
                var propertySpacer5 = document.createElement('div');
                propertySpacer5.className = ("spacerXL"); 
                
                var propertyCol7 = document.createElement('div');
                propertyCol7.className = ("col widthL"); 
                var propertyLabel7 = document.createElement('label');
                propertyLabel7.className = "printLabel"
                propertyLabel7.innerHTML = "Cue String End";
                var propertyLabel7Value = document.createElement('div');
                propertyLabel7Value.innerHTML = $('packageEditor_CueStringEnd').value;
                propertyLabel7Value.className = "printValue widthL"
                if ($('packageEditor_CueStringEnd').value == '') propertyLabel7Value.style.height = emptyHeight;
                propertyCol7.appendChild(propertyLabel7);
                propertyCol7.appendChild(propertyLabel7Value);
                
                propertyRow2.appendChild(propertyCol6);
                propertyRow2.appendChild(propertySpacer5);
                propertyRow2.appendChild(propertyCol7);
                
                var propertyBR2 = document.createElement('br');
                
                container.appendChild(propertyRow1); 
                container.appendChild(propertyBR1);
                container.appendChild(propertyRow2);
                container.appendChild(propertyBR2);
                
                // render metadata fields               
                var mdRows = $('packageEditorMetaData').immediateDescendants();
                // loop through rows and render labels and values
                for (var i=0, len=mdRows.length; i<len; i++) {
                    var row = document.createElement('div');
                    row.className = "row";
                    
                    // get cols for row
                    var cols = mdRows[i].getElementsByClassName('col');
                    for (var j=0, jlen=cols.length; j<jlen; j++) {
                        var col = document.createElement('div');
                        col.className = ("col widthM"); 
                        var label = document.createElement('label');
                        var mdLabel = cols[i].childNodes[1];
                        label.innerHTML = mdLabel.innerHTML;
                        label.className = "printLabel"
                        var value = document.createElement('div');
                        var mdValue = cols[i].childNodes[3];
                        value.className = "printValue widthM";
                        value.innerHTML = '';
                        if (mdLabel.match('list')) {
                            if (mdValue.selectedIndex > 0) {
                                value.innerHTML = mdValue.options[mdValue.selectedIndex].value;
                            }
                        } else {
                            value.innerHTML = mdValue.value;
                        }
                        if (value.innerHTML == '') value.style.height = emptyHeight;
                        
                        col.appendChild(label);
                        col.appendChild(value);
                        
                        var spacer = document.createElement('div');
                        spacer.className = ("spacerXL"); 
                        
                        row.appendChild(col);
                        row.appendChild(spacer);
                    }
                    // create break after row
                    var br = document.createElement('br');
                    
                    container.appendChild(row);
                    container.appendChild(br);
                }
                
            } else {
                span.innerHTML = "Live Control Event List";
            }
                       
            // create title row
            var titleRow = document.createElement('div');
            titleRow.className = "editorTitleBarPrint";
            // create time column
            var col1 = document.createElement('div');
            col1.className = "printTimeCol";
            col1.innerHTML = "TIME";
            col1.style.borderBottom = "none";
            var spacerXL = document.createElement('div');
            spacerXL.className = "spacerXL";
            spacerXL.style.height = "2px";
            titleRow.appendChild(col1);
            titleRow.appendChild(spacerXL);

            var col2 = document.createElement('div');
            col2.className = "printCol";
            col2.innerHTML = "EVENT";
            col2.style.borderBottom = "none";
            titleRow.appendChild(col2);

            container.appendChild(titleRow);
            
            // create editor body
            var editorBody = document.createElement('div');
            
            // loop through events to see where they land
            var startTimes = [];
            var events = $(this.ddLists[0].tagId).immediateDescendants();
            var cumTime = [0,0,0,0,0,0];
            for (var i=0, len=events.length; i<len; i++) {
                startTimes.push(parseInt(cumTime[4],10).toPaddedString(2,10) + ':' + parseInt(cumTime[5],10).toPaddedString(2,10));
                var peca = this.getPeca(events[i]);
                cumTime = this.ddLists[0].addTime(cumTime, peca.duration); 
            }
            
            
            // create editor rows/cols and append
            var eventIndex = 0;
            //for (var i=0, len=this.timeSlots.length; i<len; i++) {
            for (var i=0, len=startTimes.length; i<len; i++) {
                var row = document.createElement('div');
                row.className = "printRow";
                // create time column
                var col = document.createElement('div');
                col.className = "printTimeCol";
                //col.innerHTML = this.timeSlots[i];
                col.innerHTML = startTimes[i];
                var spacerXL = document.createElement('div');
                spacerXL.className = "spacerXL";
                spacerXL.style.height = "2px";
                row.appendChild(col);
                row.appendChild(spacerXL);
                
                //if (this.timeSlots[i] == startTimes[eventIndex]) {
                    var col = document.createElement('div');
                    col.className = "printCol";
                    col.innerHTML = events[eventIndex].innerHTML;
                    var spacerXL = document.createElement('div');
                    spacerXL.className = "spacerXL";
                    spacerXL.style.height = "2px";
                    row.appendChild(col);
                    row.appendChild(spacerXL);
                    eventIndex++;
                //}
                editorBody.appendChild(row);
            }            
            
	    } else if (this.systemLevel == 2) {
            span.innerHTML = "Event: " + $('eventEditor_Name').value;

            // create properties header
//            var properties = document.createElement('h3');
//            properties.innerHTML = "Properties";
//            properties.style.paddingLeft = "5px";
//            properties.style.width = "1280px";
//            container.appendChild(properties);
            
            // add properties
            var emptyHeight = "14px";
            
            var propertyRow1 = document.createElement('div');
            propertyRow1.className = ("row");
            
            var propertyCol1 = document.createElement('div');
            propertyCol1.className = ("col widthM"); 
            var propertyLabel1 = document.createElement('label');
            propertyLabel1.className = "printLabel"
            propertyLabel1.innerHTML = "Package Name";
            var propertyLabel1Value = document.createElement('div');
            propertyLabel1Value.className = "printValue widthM"
            propertyLabel1Value.innerHTML = $('eventEditor_Name').value;
            if ($('eventEditor_Name').value == '') propertyLabel1Value.style.height = emptyHeight;
            propertyCol1.appendChild(propertyLabel1);
            propertyCol1.appendChild(propertyLabel1Value);
            
            var propertySpacer1 = document.createElement('div');
            propertySpacer1.className = ("spacerXL"); 
            
            var propertyCol2 = document.createElement('div');
            propertyCol2.className = ("col widthM"); 
            var propertyLabel2 = document.createElement('label');
            propertyLabel2.className = "printLabel"
            propertyLabel2.innerHTML = "Duration";
            var propertyLabel2Value = document.createElement('div');
            propertyLabel2Value.className = "printValue widthM"
            propertyLabel2Value.innerHTML = $('eventEditor_Duration').value;
            if ($('eventEditor_Duration').value == '') propertyLabel2Value.style.height = emptyHeight;
            propertyCol2.appendChild(propertyLabel2);
            propertyCol2.appendChild(propertyLabel2Value);
                        
            var propertySpacer2 = document.createElement('div');
            propertySpacer2.className = ("spacerXL");
            
            var propertyCol3 = document.createElement('div');
            propertyCol3.className = ("col widthM"); 
            var propertyLabel3 = document.createElement('label');
            propertyLabel3.innerHTML = "Air Date Start";
            propertyLabel3.className = "printLabel"
            var propertyLabel3Value = document.createElement('div');
            propertyLabel3Value.className = "printValue widthM"
            propertyLabel3Value.innerHTML = $('eventEditor_AirDateFrom').value;
            if ($('eventEditor_AirDateFrom').value == '') propertyLabel3Value.style.height = emptyHeight;
            propertyCol3.appendChild(propertyLabel3);
            propertyCol3.appendChild(propertyLabel3Value);
            
            var propertySpacer3 = document.createElement('div');
            propertySpacer3.className = ("spacerXL"); 
            
            var propertyCol4 = document.createElement('div');
            propertyCol4.className = ("col widthM"); 
            var propertyLabel4 = document.createElement('label');
            propertyLabel4.innerHTML = "Air Date End";
            propertyLabel4.className = "printLabel"
            var propertyLabel4Value = document.createElement('div');
            propertyLabel4Value.className = "printValue widthM"
            propertyLabel4Value.innerHTML = $('eventEditor_AirDateTo').value;
            if ($('eventEditor_AirDateTo').value == '') propertyLabel4Value.style.height = emptyHeight;
            propertyCol4.appendChild(propertyLabel4);
            propertyCol4.appendChild(propertyLabel4Value);
                        
            var propertySpacer4 = document.createElement('div');
            propertySpacer4.className = ("spacerXL"); 
            
            var propertyCol5 = document.createElement('div');
            propertyCol5.className = ("col widthM"); 
            var propertyLabel5 = document.createElement('label');
            propertyLabel5.innerHTML = "Color";
            propertyLabel5.className = "printLabel"
            var propertyLabel5Value = document.createElement('div');
            propertyLabel5Value.className = "colorSelectBox";
            propertyLabel5Value.style.backgroundColor = $('eventEditor_Color').style.backgroundColor
            propertyCol5.appendChild(propertyLabel5);
            propertyCol5.appendChild(propertyLabel5Value);
            
            propertyRow1.appendChild(propertyCol1);
            propertyRow1.appendChild(propertySpacer1);
            propertyRow1.appendChild(propertyCol2);
            propertyRow1.appendChild(propertySpacer2);
            propertyRow1.appendChild(propertyCol3);
            propertyRow1.appendChild(propertySpacer3);
            propertyRow1.appendChild(propertyCol4);
            propertyRow1.appendChild(propertySpacer4);
            propertyRow1.appendChild(propertyCol5);
            
            var propertyBR1 = document.createElement('br');
            
            var propertyRow2 = document.createElement('div');
            propertyRow2.className = ("row");
            
            var propertyCol6 = document.createElement('div');
            propertyCol6.className = ("col widthL"); 
            var propertyLabel6 = document.createElement('label');
            propertyLabel6.className = "printLabel"
            propertyLabel6.innerHTML = "Cue String Start";
            var propertyLabel6Value = document.createElement('div');
            propertyLabel6Value.innerHTML = $('eventEditor_CueStringStart').value;
            propertyLabel6Value.className = "printValue widthL"
            if ($('eventEditor_CueStringStart').value == '') propertyLabel6Value.style.height = emptyHeight;
            propertyCol6.appendChild(propertyLabel6);
            propertyCol6.appendChild(propertyLabel6Value);
            
            var propertySpacer5 = document.createElement('div');
            propertySpacer5.className = ("spacerXL"); 
            
            var propertyCol7 = document.createElement('div');
            propertyCol7.className = ("col widthL"); 
            var propertyLabel7 = document.createElement('label');
            propertyLabel7.className = "printLabel"
            propertyLabel7.innerHTML = "Cue String End";
            var propertyLabel7Value = document.createElement('div');
            propertyLabel7Value.innerHTML = $('eventEditor_CueStringEnd').value;
            propertyLabel7Value.className = "printValue widthL"
            if ($('eventEditor_CueStringEnd').value == '') propertyLabel7Value.style.height = emptyHeight;
            propertyCol7.appendChild(propertyLabel7);
            propertyCol7.appendChild(propertyLabel7Value);
            
            propertyRow2.appendChild(propertyCol6);
            propertyRow2.appendChild(propertySpacer5);
            propertyRow2.appendChild(propertyCol7);
            
            var propertyBR2 = document.createElement('br');
            
            container.appendChild(propertyRow1); 
            container.appendChild(propertyBR1);
            container.appendChild(propertyRow2);
            container.appendChild(propertyBR2);
            
            // render metadata fields
            var mdRows = $('eventEditorMetaData').immediateDescendants();
                // loop through rows and render labels and values
                for (var i=0, len=mdRows.length; i<len; i++) {
                    var row = document.createElement('div');
                    row.className = "row";
                    
                    // get cols for row
                    var cols = mdRows[i].getElementsByClassName('col');
                    for (var j=0, jlen=cols.length; j<jlen; j++) {
                        var col = document.createElement('div');
                        col.className = ("col widthM"); 
                        var label = document.createElement('label');
                        var mdLabel = cols[i].childNodes[1];
                        label.innerHTML = mdLabel.innerHTML;
                        label.className = "printLabel"
                        var value = document.createElement('div');
                        var mdValue = cols[i].childNodes[3];
                        value.className = "printValue widthM";
                        value.innerHTML = '';
                        if (mdLabel.match('list')) {
                            if (mdValue.selectedIndex > 0) {
                                value.innerHTML = mdValue.options[mdValue.selectedIndex].value;
                            }
                        } else {
                            value.innerHTML = mdValue.value;
                        }
                        if (value.innerHTML == '') value.style.height = emptyHeight;
                        
                        col.appendChild(label);
                        col.appendChild(value);
                        
                        var spacer = document.createElement('div');
                        spacer.className = ("spacerXL"); 
                        
                        row.appendChild(col);
                        row.appendChild(spacer);
                    }
                    // create break after row
                    var br = document.createElement('br');
                    
                    container.appendChild(row);
                    container.appendChild(br);
                }
            
            // create title row
            var titleRow = document.createElement('div');
            titleRow.className = "editorTitleBarPrint";
            // create time column
            var col = document.createElement('div');
            col.className = "printTimeCol";
            col.innerHTML = "TIME";
            col.style.borderBottom = "none";
            var spacerXL = document.createElement('div');
            spacerXL.className = "spacerXL";
            spacerXL.style.height = "2px";
            titleRow.appendChild(col);
            titleRow.appendChild(spacerXL);

            for (var i=0, len=this.headerText.length; i<len; i++) {
                var col = document.createElement('div');
                col.className = "printCol";
                col.innerHTML = this.headerText[i];
                col.style.borderBottom = "none";
                var spacerXL = document.createElement('div');
                spacerXL.className = "spacerXL";
                spacerXL.style.height = "2px";
                titleRow.appendChild(col);
                titleRow.appendChild(spacerXL);
            }

            container.appendChild(titleRow);
            
            // create editor body
            var editorBody = document.createElement('div');
            
            // loop through assets/combos to see where they land
            var startTimesArr = [];
            var listIndex = [];
            for (var i=0, len=this.ddLists.length; i<len; i++) {
                var assets = $(this.ddLists[i].tagId).immediateDescendants();
                var cumTime = [0,0,0,0,0,0];
                var startTimes = [];
                for (var j=0, jlen=assets.length; j<jlen; j++) {
                    startTimes.push(parseInt(cumTime[4],10).toPaddedString(2,10) + ':' + parseInt(cumTime[5],10).toPaddedString(2,10));
                    var peca = this.getPeca(assets[j]);
                    cumTime = this.ddLists[i].addTime(cumTime, peca.duration); 
                }
                startTimesArr.push(startTimes);
                listIndex.push(0);
            }
            
            // combine startTimes and get unique list
            var uniqueStartTimes = startTimesArr.flatten().uniq().sort();
            
            // create editor rows/cols and append
//            for (var i=0, len=this.timeSlots.length; i<len; i++) {
//                for (var j=0, jlen=this.ddLists.length; j<jlen; j++) {
//                    if (this.timeSlots[i] == startTimesArr[j][listIndex[j]]) {
            for (var i=0, len=uniqueStartTimes.length; i<len; i++) {
                        var row = document.createElement('div');
                        row.className = "printRow";
                        // create time column
                        var col = document.createElement('div');
                        col.className = "printTimeCol";
                        col.innerHTML = uniqueStartTimes[i];
                        var spacerXL = document.createElement('div');
                        spacerXL.className = "spacerXL";
                        spacerXL.style.height = "2px";
                        row.appendChild(col);
                        row.appendChild(spacerXL);
//                        break;
//                    }
//                }
                
                for (var j=0, jlen=this.ddLists.length; j<jlen; j++) {
                    if (uniqueStartTimes[i] == startTimesArr[j][listIndex[j]]) {
                        var col = document.createElement('div');
                        col.className = "printCol";
                        var dragEl = $(this.ddLists[j].tagId).immediateDescendants()[listIndex[j]];
                        if (dragEl) col.innerHTML = dragEl.innerHTML;
                        var spacerXL = document.createElement('div');
                        spacerXL.className = "spacerXL";
                        spacerXL.style.height = "2px";
                        row.appendChild(col);
                        row.appendChild(spacerXL);
                        listIndex[j]++;
                    } else {
                        var col = document.createElement('div');
                        col.className = "printCol";
                        col.innerHTML = "&nbsp;";
                        var spacerXL = document.createElement('div');
                        spacerXL.className = "spacerXL";
                        spacerXL.style.height = "2px";
                        row.appendChild(col);
                        row.appendChild(spacerXL);
                    }
                }
                editorBody.appendChild(row);
            }            
            
	    }
	    
	    container.appendChild(editorBody);
        outerContainer.appendChild(container);
        win.document.write(outerContainer.innerHTML);
        
        // write javascript into document
        win.document.write('<script type="text/javascript">');
        win.document.write('window.onload = function() {');
        win.document.write('var rows = document.getElementsByClassName("printRow");');
        win.document.write('for (var i=0, len=rows.length; i<len; i++) {');
        win.document.write('var rowHeight = rows[i].getHeight() - 6;');
        win.document.write('var rowCols = rows[i].immediateDescendants();');
        win.document.write('for (var j=0, jlen=rowCols.length; j<jlen; j++) {');
        win.document.write('rowCols[j].style.height = rowHeight + "px";');
        win.document.write('}}');
        win.document.write('} </script>');   
        
        htmlFooter = '</body></html>';
        win.document.write(htmlFooter);
        win.document.close();
        
        win.focus();	    
	},
	
	exportCSV: function () {
	    var textStr = "";
        if (this.systemLevel == 0) {	
            // create title
            textStr += "Schedule Export\n";
            // add row starting with "TIME" field
            textStr += "\"TIME\",";        
            for (var i=0, len=this.headerText.length; i<len; i++) {
                if ( i < (len-1) ) {
                    textStr += "\"" + this.headerText[i] + "\",";
                } else {
                    textStr += "\"" + this.headerText[i] + "\"\n";
                }
             }
            // add the remaining rows
            for (var i=0, len=this.timeStrs.length; i<len; i++) {
                // add time field
                textStr += "\"" + this.timeStrs[i] + "\",";
                for (var j=0, jlen=this.ddLists.length; j<jlen; j++) {
                    // get package name
                    var dragEl = $(this.ddLists[j].tagId).immediateDescendants()[i].firstDescendant();
                    var packageName = (dragEl) ? dragEl.firstChild.text : '';
                    // double up any quotes that are in package name
                    packageName.replace(/\"/g, "\"\"");
                    if ( j < (jlen-1) ) {
                        textStr += "\"" + packageName + "\",";
                    } else {
                        textStr += "\"" + packageName + "\"\n";
                    }
                }
            }
        } else if (this.systemLevel == 1) {
            // create title
            if (activeEditorPageId != 'liveControl') {
                var packageName = $('packageEditor_Name').value;
                // remove spaces and double up double quotes
                //packageName.replace(/ /g, "");
                packageName.replace(/\"/g, "\"\"");
                textStr += packageName + "\n";
             } else {
                textStr += "Live Control\n";
             }
             // add row starting with "TIME" field
            textStr += "\"TIME\",";        
            for (var i=0, len=this.headerText.length; i<len; i++) {
                if ( i < (len-1) ) {
                    textStr += "\"" + this.headerText[i] + "\",";
                } else {
                    textStr += "\"" + this.headerText[i] + "\"\n";
                }
             }
             
            // loop through events to see where they land
            var startTimes = [];
            var events = $(this.ddLists[0].tagId).immediateDescendants();
            var cumTime = ['0','0','0','00','00','00'];
            for (var i=0, len=events.length; i<len; i++) {
                startTimes.push(parseInt(cumTime[4],10).toPaddedString(2,10) + ':' + parseInt(cumTime[5],10).toPaddedString(2,10));
                var peca = this.getPeca(events[i]);
                cumTime = this.ddLists[0].addTime(cumTime, peca.duration); 
            }
             
            // add the remaining rows
            var eventIndex = 0;
            for (var i=0, len=startTimes.length; i<len; i++) {
                // add time field
                textStr += "\"" + startTimes[i] + "\",";
                var eventName = events[eventIndex].innerHTML;
                // double up any quotes that are in event name
                eventName.replace(/\"/g, "\"\"");
                textStr += "\"" + eventName + "\"\n";
                eventIndex++;
            }
        } else if (this.systemLevel == 2) {
            // create title
            var eventName = $('eventEditor_Name').value;
            // remove spaces and double up double quotes
            //eventName.replace(/ /g, "");
            eventName.replace(/\"/g, "\"\"");
            textStr += eventName + "\n";

             // add row starting with "TIME" field
            textStr += "\"TIME\",";        
            for (var i=0, len=this.headerText.length; i<len; i++) {
                if ( i < (len-1) ) {
                    textStr += "\"" + this.headerText[i] + "\",";
                } else {
                    textStr += "\"" + this.headerText[i] + "\"\n";
                }
             }
             
            // loop through assets/combos to see where they land
            var startTimesArr = [];
            var listIndex = [];
            for (var i=0, len=this.ddLists.length; i<len; i++) {
                var assets = $(this.ddLists[i].tagId).immediateDescendants();
                var cumTime = [0,0,0,0,0,0];
                var startTimes = [];
                for (var j=0, jlen=assets.length; j<jlen; j++) {
                    startTimes.push(parseInt(cumTime[4],10).toPaddedString(2,10) + ':' + parseInt(cumTime[5],10).toPaddedString(2,10));
                    var peca = this.getPeca(assets[j]);
                    cumTime = this.ddLists[i].addTime(cumTime, peca.duration); 
                }
                startTimesArr.push(startTimes);
                listIndex.push(0);
            }
            
            // combine startTimes and get unique list
            var uniqueStartTimes = startTimesArr.flatten().uniq().sort();
             
            // add the remaining rows                        
            for (var i=0, len=uniqueStartTimes.length; i<len; i++) {
                // add time field
                textStr += "\"" + uniqueStartTimes[i] + "\",";
                for (var j=0, jlen=this.ddLists.length; j<jlen; j++) {
                    if (uniqueStartTimes[i] == startTimesArr[j][listIndex[j]]) {
                        var dragEl = $(this.ddLists[j].tagId).immediateDescendants()[listIndex[j]];
                        var name = "";
                        if (dragEl) name = dragEl.innerHTML;
                        // double up any quotes that are in event name
                        name.replace(/\"/g, "\"\"");
                        if ( j < (jlen-1) ) {
                            textStr += "\"" + name + "\",";
                        } else {
                            textStr += "\"" + name + "\"\n";
                        }
                        listIndex[j]++;
                    } else {
                        if ( j < (jlen-1) ) {
                            textStr += "\"\",";
                        } else {
                            textStr += "\"\"\n";
                        }
                    }
                }
            }            
        }
	    //var textStr = "Package A\n";
        //textStr += "\"john\",\"doe\",\"123 main street\"\n\"john\",\"doe\",\"123 main street\"";
        url = "WriteCSV.aspx";
        this.request['csv'] = new XMLHttpRequest();
        this.request['csv'].open('POST', url, true);
        this.request['csv'].setRequestHeader("Content-Type", "text/plain");
        this.request['csv'].send(textStr);
        this.request['csv'].onreadystatechange = this.processExportCSVStateChange.bindAsEventListener(this);
	},
	
	processExportCSVStateChange: function () {
	    if (this.request['csv'].readyState == 4) {
		    if (this.request['csv'].status == 200) {
		        //alert(this.request['csv'].responseText);
		        var filePath = "Exports/" + this.request['csv'].responseText;
		        //var filePath = this.request['csv'].responseText;
		        $('exportCSVLink').setAttribute('href', filePath);
		        $('exportCSVPopup').style.display = "block";
			}
		}
	},
	
	// function to check cue string duration
    checkCueStringDuration: function (durationInput) {
        // check duration
        var msgNode = (this.systemLevel == 1) ? $('packageEditorCueAlerts') : $('eventEditorCueAlerts');
        var objDuration = (this.systemLevel == 1) ? $('packageEditor_Duration').value : $('eventEditor_Duration').value;
        var errMsg = "";
        msgNode.innerHTML = "";
        msgNode.style.display = "none"; 
        var durationStr = durationInput.value.strip();
        if (durationStr && !(durationStr.match(durationRegex))) { // check format
            errMsg += "Cue string duration is not formatted correctly<br />";
            msgNode.innerHTML = errMsg;
            msgNode.style.display = "block";
            return;
        } else if (durationStr) {  
            durationInput.value = padDurationStr(durationStr).substr(3);
            if (durationInput.value > objDuration) { // check within limit
                if (this.systemLevel == 1) {
                    errMsg += "Cue string duration exceeds the current package's duration<br />";
                } else {
                    errMsg += "Cue string duration exceeds the current event's duration<br />";
                }
                msgNode.innerHTML = errMsg;
                msgNode.style.display = "block";
            }
        }
    }
}

var EditorButtons = Class.create();
EditorButtons.prototype = {
	initialize: function () {
		this.copyButton = new EditorButton('Copy', 'copyBtn', 'activeEditor.copyToClip();', true);
		this.cutButton = new EditorButton('Cut', 'cutBtn', 'activeEditor.cutToClip();', true);
		this.pasteButton = new EditorButton('Paste', 'pasteBtn', 'activeEditor.checkPasteFromClip();', true);
		this.addButton = new EditorButton('Add', 'addBtn', 'activeEditor.addFromIcon();', true);
		this.removeButton = new EditorButton('Remove', 'removeBtn', 'activeEditor.remove();', true);
		this.getInfoButton = new EditorButton('Get Info', 'getInfoBtn', 'showGetInfo();', false);
		this.hotKeysButton = new EditorButton('Hot Keys', 'hotKeysBtn', 'showHotKeys();', false);
		this.printButton = new EditorButton('Print', 'printBtn', 'activeEditor.showPrintPage();', false);
		this.exportButton = new EditorButton('Export CSV', 'exportBtn', 'activeEditor.exportCSV();', false);
	}, 
	
	render: function () {
		var buttonsContainer = document.createElement('div');
		
		var spacerXL = document.createElement('div');
		spacerXL.className = "spacerXL";
		buttonsContainer.appendChild(spacerXL);
		buttonsContainer.appendChild(this.copyButton.render());
		
		var spacerS = document.createElement('div');
		spacerS.className = "spacerS";
		buttonsContainer.appendChild(spacerS);
		buttonsContainer.appendChild(this.cutButton.render());
		
		var spacerS = document.createElement('div');
		spacerS.className = "spacerS";
		buttonsContainer.appendChild(spacerS);
		buttonsContainer.appendChild(this.pasteButton.render());
		
		var spacerXL = document.createElement('div');
		spacerXL.className = "spacerXL";
		buttonsContainer.appendChild(spacerXL);
		buttonsContainer.appendChild(this.addButton.render());
		
		var spacerS = document.createElement('div');
		spacerS.className = "spacerS";
		buttonsContainer.appendChild(spacerS);
		buttonsContainer.appendChild(this.removeButton.render());
		
		var spacerXL= document.createElement('div');
		spacerXL.className = "spacerXL";
		buttonsContainer.appendChild(spacerXL);
		buttonsContainer.appendChild(this.getInfoButton.render());
		
		var spacerS = document.createElement('div');
		spacerS.className = "spacerS";
		buttonsContainer.appendChild(spacerS);
		buttonsContainer.appendChild(this.hotKeysButton.render());
		
		if (activeEditorPageId != 'multiPackage') {
		    var spacerXL = document.createElement('div');
		    spacerXL.className = "spacerXL";
		    buttonsContainer.appendChild(spacerXL);
		    buttonsContainer.appendChild(this.printButton.render());
    		
		    var spacerS = document.createElement('div');
		    spacerS.className = "spacerS";
		    buttonsContainer.appendChild(spacerS);
		    buttonsContainer.appendChild(this.exportButton.render());
		}
		
		return buttonsContainer;
	}
}

var EditorButton = Class.create();
EditorButton.prototype = {
	initialize: function (value, tagId, clickEvent, disabled) {
		this.value = value;
		this.tagId = activeEditor.tagId + "_" + tagId;
		this.clickEvent = clickEvent;
		this.disabled = disabled;
	},
	
	render: function () {
		var buttonEl = document.createElement('input');
		buttonEl.id = this.tagId;
		buttonEl.setAttribute('type', 'button');
		buttonEl.setAttribute('value', this.value);
		buttonEl.setAttribute('onclick', this.clickEvent);
		if (this.disabled) {
			buttonEl.setAttribute('disabled', 'disabled');
		}
		return buttonEl;
	},
	
	enable: function () {
		if (!this.disabled) return;
		this.disabled = false;
		$(this.tagId).removeAttribute('disabled');
		
	},
	
	disable: function () {
		if (this.disabled) return;
		this.disabled = true;
		$(this.tagId).setAttribute('disabled', 'disabled');
	}
}

var CueString = Class.create();
CueString.prototype = {
	initialize: function () {
	    this.tagId = "";
	    this.time = "";
	    this.cueString = "";
	    this.deleted = false;
	},
	
	load: function (time, cueString) {
		this.tagId = activeEditor.tagId + "_cue_" + activeEditor.cueIndex++;
		this.time = time;
		this.cueString = cueString;

	},
	
	render: function () {
            
        // create row containing cue
        var row = document.createElement('div');
        row.id = this.tagId;
        row.style.width = "880px;";
        row.style.height = "50px;";
        row.style.overflow = "hidden";
        
        // create first column and its elements
        var col1 = document.createElement('div');
        col1.className = "col";
        col1.style.marginBottom = "5px";
        var btnAdd = document.createElement('input');
        btnAdd.setAttribute('type', 'button');
        btnAdd.setAttribute('value', '+');
        btnAdd.setAttribute('onclick', 'activeEditor.addNewCueStringRow();');
        var spacerS = document.createElement('div');
        spacerS.className = "spacerS";
        var btnMinus = document.createElement('input');
        btnMinus.setAttribute('type', 'button');
        btnMinus.setAttribute('value', '-');
        btnMinus.className = "cueEventMinus";
        Event.observe(btnMinus, 'click', activeEditor.cachedRemoveCueStringRow);
        var spacerL1 = document.createElement('div');
        spacerL1.className = "spacerL";
//        var timeSelect = document.createElement('select');
//        timeSelect.className = "cueEventSelect";
//        Event.observe(timeSelect, 'change', activeEditor.cachedUpdateCueInEditor);
//        var defaultOption = document.createElement('option');
//        defaultOption.value = -1;
//        defaultOption.text = "Select Time";
//        timeSelect.options.add(defaultOption);
//        //var times = activeEditor.timeSlots;
//        var times = this.getTimeStrings();
//        for (var i=0, len=times.length; i<len; i++) {
//            var optionEl = document.createElement('option');
//            optionEl.value = times[i];
//            optionEl.text = times[i];
//            if (times[i] == this.time) optionEl.setAttribute('selected', 'selected');
//            timeSelect.options.add(optionEl);
//        }
        var timeInput = document.createElement('input');
        timeInput.setAttribute('type', 'text');
        timeInput.className = "time";
        timeInput.value = this.time;
        timeInput.setAttribute('onchange', 'activeEditor.checkCueStringDuration(this)');
        var spacerL2 = document.createElement('div');
        spacerL2.className = "spacerL";
        var stringInput = document.createElement('input');
        stringInput.setAttribute('type', 'text');
        stringInput.style.width = "600px";
        if (this.cueString != '') stringInput.value = this.cueString;
        
        // append elements to first column
        col1.appendChild(btnAdd);
        col1.appendChild(spacerS);
        col1.appendChild(btnMinus);
        col1.appendChild(spacerL1);
        col1.appendChild(timeInput);
        col1.appendChild(spacerL2);
        col1.appendChild(stringInput);
        
        // append columns to row
        row.appendChild(col1);  
        
        return row;        
	},
	
	getTimeStrings: function () {
		var hoursInc = 1 / 3600;
		var minutesInc = 1 / 60;	
		var secondsInc = 1;
		var startHours = 0;
		var startMinutes = 0;
		var startSeconds = 0;
		var endHours = activeEditor.endTime.getHours();
		var endMinutes = activeEditor.endTime.getMinutes();
		var endSeconds = activeEditor.endTime.getSeconds();
		var numIntervals = (endHours * 3600) + (endMinutes * 60) + (endSeconds);
		var timeStrs = [];
		for (var i=0; i<numIntervals; i++) {
			var timeStr = "";
			var minutes = Math.floor(startMinutes + minutesInc * i) % 60;
			var seconds = Math.floor(startSeconds + secondsInc * i) % 60;
			timeStr += minutes.toPaddedString(2,10) + ":" + seconds.toPaddedString(2,10);
			timeStrs.push(timeStr);
		}
		return timeStrs;
	}
}